日常遇到问题,使用css3动画的时候,想要让动画能够重新执行,答案在百度不好找,不过最后还是ojbk了。通过删除类名,再增加类名来达到重新开始动画。
<img class="musicImg musicImage" :src="listen.musicPic" alt="">
.musicImg{
width:1.2rem;
height:1.2rem;
border-radius:50%;
float:left;
margin-top:-0.2rem;
margin-left:0.2rem;
}
.musicImage{
animation:rotate 12s linear 0.2s infinite;
-webkit-animation:rotate 12s linear 0.2s infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
watch: {
// 监听数据变化,重新开始音乐图片旋转
listen:{
handler:function(newUrl){
let img = document.getElementsByClassName('musicImg')[0]
if(img){
// 通过删除增加类名,达到重新开始动画
img.classList.remove("musicImage");
console.log('歌曲改变了')
// 如果没有这个语句,那么就不能重新加载动画,这个很重要
void img.offsetWidth;
img.classList.add("musicImage");
}
},
deep:true
}
},
另外,有一个方法是通过设置两个功能一样的动画,然后在两个动画之间切换,也可以达到重新开始动画的效果。