做的一个账户金额刷新旋转的小图标
veiw页面部分
<img
src="../../../images/assets/img/shuaxin.png"
@click="shuaxin"
:class="[isRotate?'rotate':'rotate1']"
/>
script部分
data() {
return {
isRotate: false,
}
},
methods:{
shuaxin(){
this.isRotate = !this.isRotate;
}
}
style部分
.rotate {
transition: all 1s;
}
.rotate1 {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-moz-transform: rotate(360deg); /* Firefox */
-webkit-transform: rotate(360deg); /* Safari 和 Chrome */
-o-transform: rotate(360deg); /* Opera */
transition: all 1s;
}
.rotate2 {
transition: all 0.5s;
}
.rotate3 {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-moz-transform: rotate(180deg); /* Firefox */
-webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-o-transform: rotate(180deg); /* Opera */
transition: all 0.5s;
}