利用三元运算符加载动态样式实现动画旋转或停止
<image :class="[musicState ? 'mcStart':'mcStop']" src='/static/png/musicOn.png' @click="state()" > </image>
data() {
return {
musicState: true
}
},
methods: {
state(){
if(this.musicState){
this.musicState = false
} else {
this.musicState = true
}
}
}
/* 图片旋转动画样式 */
@keyframes box-ani {
from {
transform: rotate(0)}
to {
transform: rotate(360deg)}
}
.mcStart{
height: 70rpx;
width: 70rpx;
display: flex;
flex-direction: row;
position: absolute;
z-index: 99;
top: 1%;
left: 1%;
animation: box-ani 4s infinite linear; /*旋转动画*/
}
.mcStop{
height: 70rpx;
width: 70rpx;
display: flex;
flex-direction: row;
position: absolute;
z-index: 99;
top: 1%;
left: 1%;
}