记录一下点击图片实现旋转功能
html中
<img src="../../assets/404_imaages alt :class="[rotate === 0 ? ‘go‘: rotate === 1 ? ‘go1‘ : rotate === 2 ? ‘go2‘ : rotate === 3 ? ‘go3‘ :‘go4‘]" @click="start"/>
js中
data() { return { rotate: 4, count:0, }; }, methods: { start() { this.count++; switch(this.count%4){ case 0 : this.rotate = 0; setTimeout(() => { this.rotate = 4; }, 700); break; case 1 : this.rotate = 1; break; case 2 : this.rotate = 2; break; case 3 : this.rotate = 3; break; }
style中
.go {
transform: rotate(360deg);
transition: all 2s;
}
.go1{
transform:ratate(90deg);
transition: all 2s;
}
.go2{
transform:ratate(180deg);
transition:all 2s;
}
.go3{
transform:ratate(270deg);
transtion:all 2s;
}
.go4{
transform:ratate(0deg);
transtion:all 2s;
}
原文:https://www.cnblogs.com/xiaoyiyiaixuexi/p/14267308.html