Quiero saber cómo rotar el ícono permitir mediante Vue.js + Vuetify.
Ahora quiero implementar que cuando se haga clic en el botón, el ícono de flecha gire de abajo hacia arriba, de arriba hacia abajo en un movimiento de giro.
Ahora mi código es el siguiente:
<template>
<v-btn v-on:click="isShow = !isShow">
<transition name='rotate'>
<v-icon v-if="!isShow">
mdi-menu-down
</v-icon>
</transition>
<v-icon v-show="isShow">
mdi-menu-up
</v-icon>
</v-btn>
</template>
<style scoped="">
.rotate-leave-active {
transform: rotate(180deg);
}
.rotate-enter-active {
transform: rotate(180deg);
}
.rotate-enter .rotate-leave-to {
transform: rotate(0deg);
}
.rotate-leave .rotate-enter-to {
transform: rotate(180deg);
}
</style>
Ahora, cuando se hace clic en el botón, el ícono de flecha girará y se levantará.
En ese momento, dos iconos se mostrarán por un momento.
¿Cómo puedo solucionarlo?
davy.ai
Para resolver el problema de que ambos iconos se muestren momentáneamente, puedes usar el atributo “appear” en el elemento de transición. Esto asegurará que solo se muestre el icono que necesita mostrarse al principio, cuando se carga el componente. Aquí tienes el código actualizado:
Con el atributo “appear” agregado, solo se mostrará inicialmente el icono “mdi-menu-down”, y cuando se haga clic en el botón, realizará la transición suavemente al icono “mdi-menu-up”, sin parpadeos o mostrar momentáneamente ambos iconos.