El componente Transition

Vue incluye el componente integrado <Transition>, que aplica animaciones de entrada y salida a un único elemento o componente cuando se inserta o se elimina mediante v-if o v-show.

Por sí mismo no genera ningún elemento DOM adicional: únicamente gestiona las clases CSS y los tiempos de su elemento hijo.

<Transition> espera exactamente un hijo directo. Envolver varios elementos hermanos no funcionará; use <TransitionGroup> para las listas.

El hijo debe alternarse mediante v-if, v-show o un componente dinámico.

Durante una entrada o una salida, Vue añade y elimina automáticamente seis clases en secuencia.

• v-enter-from / v-leave-from - estado inicial
• v-enter-active / v-leave-active - fase activa (coloque aquí la transición)
• v-enter-to / v-leave-to - estado final

Asigne una propiedad name a la transición para que el prefijo de las clases cambie de v- a su nombre. Con name="fade", las clases pasan a ser fade-enter-from, fade-enter-active, etc.

El fundido clásico anima opacity. El elemento comienza siendo completamente transparente, la clase activa declara la transición y la clase final lo lleva a una opacidad completa.

Cuando se inserta el elemento:

1. fade-enter-from y fade-enter-active se añaden antes de la representación (opacidad 0).
2. En el siguiente fotograma, fade-enter-from se elimina y se añade fade-enter-to, por lo que la opacidad se anima hacia 1.
3. Cuando termina la transición, se eliminan las clases active y to.

La salida refleja la entrada mediante las clases leave. A menudo puede reutilizar la misma regla activa para ambas direcciones.

Ambas directivas activan transiciones. v-if monta y desmonta realmente el elemento, mientras que v-show lo mantiene en el DOM y alterna display. Con v-show, Vue gestiona el cambio de visualización alrededor de la fase activa para que la animación siga siendo visible.

De forma predeterminada, la transición no se ejecuta en la primera representación. Añada la propiedad appear para que la animación de entrada se reproduzca cuando el componente se monte por primera vez.

Use v-if / v-else dentro de un único componente Transition para intercambiar dos elementos. Asigne a cada uno una key única si tienen la misma etiqueta, para que Vue los trate como elementos distintos.

Respete a los usuarios que prefieren menos movimiento. Deshabilite o acorte las transiciones con la consulta de medios prefers-reduced-motion para que las animaciones no causen molestias.

¿Qué define fade-enter-from?

Ha aprendido a usar el componente integrado <Transition>: envuelve un elemento alternado mediante v-if/v-show, aplica seis clases CSS (enter-from, enter-active, enter-to y sus equivalentes de salida), admite un prefijo name, appear para la primera representación y mode para los intercambios.