思路解析:
1,先写dom层结构
2,css样式
3,js逻辑
(1)先通过选择器获取audio标签
(2)监听play与pause
(3)进入页面之前,图片不旋转,不给图片添加旋转
(4)当点击play播放,通过.classList.remove移除按钮的当前默认状态,使其处于播放状态,通过.classList.add给图片添加旋转
(5)当点击pause按钮,通过.classList.add增加按钮的暂停状态,使其处于暂停
第一步:DOM层结构
<div class="ig">
<img :src="item.img_url?netif.imagePrefix+item.img_url:''" alt="" mode="widthFix">
</div>
第二步:css样式
<style>
@keyframes myrotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.cover-animation{
animation: myrotate 8s linear infinite;
}
.cover-animation-pause{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
</style>
第三步:JS逻辑结构
<script>
mounted(){
var player = document.querySelector("audio")
player.addEventListener("play",function(){
document.querySelector(".ig").classList.remove("cover-animation-pause")
document.querySelector(".ig").classList.add("cover-animation")
})
player.addEventListener("pause",function(){
document.querySelector(".ig").classList.add("cover-animation-pause")
})
},
</script>