VUE小需求——旋转小图标

做的一个账户金额刷新旋转的小图标

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