記錄一下點選圖片實現旋轉功能

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