• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

174
Vistas
Rotar imagen con @click en Vue2

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>

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda