在 Vue2 中使用@click 旋转图像

Question

我在仪表板上有一个刷新按钮。我想让它旋转 360 度。如何在每次点击 刷新按钮时 旋转图像？

这是我试过的代码，它只能点击两次：

var vm = new Vue({
  el: '#app',
  data: {
    clicked: false,
  },
  methods: {
    rotation() {
      this.clicked = !this.clicked
    }
  }
})

.clicked {
  transform: rotate(360deg);
  transition: transform 0.5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <img 
    src="https://via.placeholder.com/100/09f.png/fff" 
    @click="rotation" 
    :class="{ clicked }" 
    alt="refresh-icon-btn" 
  />
</div>

Answer 1

这可能是其中一种方法，使用内联样式在 0 度和 360 度之间切换，并使用常量 class 进行转换。

var vm = new Vue({
  el: '#app',
  data: {
    deg: 0,
  },
  methods: {
    rotation() {
      this.deg += 360;
    }
  }
})

.transition {
  transition: transform 0.5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
  <img src="https://via.placeholder.com/100/09f.png/fff" @click="rotation" class="transition" v-bind:style="{transform: `rotate(${deg}deg)`}" alt="refresh-icon-btn" />
</div>

Answer 2

另一种方法是使用setTimeout去掉动画后的class

var vm = new Vue({
  el: '#app',
  data: {
    clicked: false,
    rotationDuration: 500
  },
  methods: {
    rotation() {
      this.clicked = !this.clicked
      setTimeout(() => this.clicked = !this.clicked, this.rotationDuration)
    }
  }
})

.clicked {
  transform: rotate(360deg);
  transition: transform var(--rotation-duration) ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <img 
    src="https://via.placeholder.com/100/09f.png/fff" 
    @click="rotation" 
    :class="{ clicked }" 
    :style="`--rotation-duration: ${rotationDuration}ms`"
    alt="refresh-icon-btn" 
  />
</div>

Answer 3

您只需使用 class binding 即可打开和关闭 class。

var vm = new Vue({
  el: '#app',
  data: {
    isClicked: false,
  },
  methods: {
    rotation() {
      this.isClicked = !this.isClicked
    }
  }
})

.image {
  transition: transform 0.5s ease-in-out;
}

.clicked {
  transform: rotate(360deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <img 
    src="https://via.placeholder.com/100/09f.png/fff" 
    @click="rotation"
    class="image"
    :class="{ clicked: isClicked }" 
    alt="refresh-icon-btn" 
  />
</div>

在 Vue2 中使用@click 旋转图像

Rotate image with @click in Vue2

javascript

css

vue.js

vuejs2