Tengo un botón de actualización en el tablero. Quiero hacerlo girar 360 grados. ¿Cómo puedo rotar la imagen con cada clic en un botón de actualización?
Este es el código que probé, solo funciona dos veces, haga clic:
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>Este podría ser uno de los enfoques, tener un estilo en línea para alternar entre 0 y 360 grados y tener una clase constante para la transición.
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>Otro enfoque es usar setTimeout para eliminar la clase después de la animación.
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>Simplemente puede usar un enlace de clase para activar y desactivar la clase.
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>