Animaciones CSS3 con transiciones en Vue

Domina cómo unir animaciones y transiciones de CSS3 con Vue.js para crear interfaces fluidas y claras. Aprenderás a usar el elemento transition, a nombrar correctamente las clases como move-enter-active y move-leave-active, y a controlar cada etapa con las clases que Vue inyecta automáticamente.

¿Cómo integrar animaciones CSS3 y transiciones en Vue.js?

Integrar estilos con Vue es directo cuando entiendes el flujo: defines clases en tu Sass/CSS y Vue aplica esas clases en las etapas de entrada y salida. Así, puedes mover un elemento en los ejes X, Y o Z con transform y suavizar cambios con transition.

¿Qué clases CSS3 se crean y para qué sirven?

Se configuran dos grupos de reglas: las activas y las iniciales/finales.

• Clases activas: controlan el estado en movimiento con transform: translateX(0) y transition: all 0.3s linear. Permiten que el cambio sea suave.
• Clases de entrada/salida: colocan el elemento fuera de pantalla con translateX(100%) para que luego entre o salga.

Ejemplo en main.scss:

.move-enter-active,
.move-leave-active {
  transform: translateX(0);
  transition: all 0.3s linear;
}

.move-enter,
.move-leave-2 {
  transform: translateX(100%);
}

Puntos clave: - transform mueve el elemento en los ejes X, Y y Z. - translate X a 0 lo posiciona visible en el eje X. - transition aplica la animación cuando cambian propiedades CSS. - 0.3s y lineal definen duración y aceleración.

¿Cómo mapea Vue.js las etapas de transición?

Vue.js inyecta clases por etapa, y tú las "interceptas" con tus reglas CSS. Las clases mencionadas son: v-enter, v-enter-active, v-enter-2, v-leave, v-leave-active y v-leave-2.

• Entrada: v-enter (empieza), v-enter-active (mientras está activa), v-enter-2 (cuando se está yendo de esa fase).
• Salida: v-leave (empieza a irse), v-leave-active (activa), v-leave-2 (finaliza).

La convención de nombres une tu nombre de transición con la etapa: primero el nombre, luego el estado. Ejemplo: move-enter-active referencia a la fase activa de entrada.

¿Qué hace el componente transition en Vue.js y cómo se aplica?

El elemento personalizado transition de Vue envuelve el contenido al que quieres aplicar los efectos. Al pasarle un nombre, Vue sabe qué prefijo usar para inyectar las clases de cada etapa.

¿Cómo envolver componentes con el elemento transition?

En search.vue, se aplican transiciones a dos componentes: loader y pm-notification. Se usa el nombre "move" porque tus clases están definidas con ese prefijo: move-enter-active, move-leave-active, move-enter y move-leave-2.

<template>
  <div>
    <transition name="move">
      <loader v-if="loading" />
    </transition>

    <transition name="move">
      <pm-notification v-if="showMessage" />
    </transition>
  </div>
</template>

Claves prácticas: - name="move" conecta el componente con tus clases .move-…. - Envuelve cada componente que quieras animar con transition. - Controla la visibilidad con condiciones como v-if para disparar la transición.

¿Qué resultados y recursos se mencionan?

Al probar en el navegador, se muestra un flujo claro:

• Búsqueda de una canción (por ejemplo, de los Rolling Stones): el loader entra desde fuera de la pantalla hacia adentro con una animación suave.
• Si no hay resultados: el loader sale y entra el mensaje de no se encontraron resultados.

Más opciones: - Transition Group de Vue.js también existe para listas. Queda como desafío para explorar y compartir avances. - Para profundizar en animaciones: se menciona un curso sobre Animaciones para la Web en Platzi para crear efectos más sofisticados y reutilizables en cualquier proyecto.

¿Ya aplicaste estas transiciones o exploraste Transition Group? comparte tu experiencia y dudas en los comentarios.