uniapp 开发小程序旋转图片动画

利用三元运算符加载动态样式实现动画旋转或停止

<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%;		
}