Cuando construyes interfaces interactivas, los elementos que aparecen y desaparecen de forma abrupta generan una experiencia poco pulida. Vue.js resuelve esto con un componente built-in llamado transition, que permite aplicar estilos CSS de forma automática durante la entrada y salida de elementos en pantalla. A continuación se explica cómo funciona paso a paso, desde la estructura mínima hasta lograr un efecto de fade in y fade out completo.
¿Cómo preparar la estructura base para usar transition?
El punto de partida es un escenario muy común: un botón que muestra u oculta un menú mediante una variable booleana [00:49]. Se declara una variable show en data con valor false por defecto. Al hacer clic en el botón, se invierte su valor para alternar entre true y false.
El menú se construye como un componente externo sencillo con una lista de opciones [01:30]. Para controlar su visibilidad existen dos alternativas:
- v-if: monta y desmonta el componente del DOM cada vez que cambia la condición.
- v-show: mantiene el componente en el DOM y solo alterna la propiedad CSS
display: none [02:17].
En este caso se utiliza v-show porque resulta más eficiente cuando el elemento se muestra y oculta con frecuencia, ya que evita el costo de montar y desmontar el componente repetidamente.
¿Qué clases CSS genera el componente transition?
Para agregar una animación, se envuelve el elemento dentro del componente <transition> y se le asigna un atributo name [03:07]. Este nombre actúa como prefijo para las clases CSS que Vue.js espera encontrar. Si el nombre es fade, las clases seguirán el patrón fade-.
El componente trabaja con dos estados principales:
- enter: se refiere al momento en que el elemento entra a la pantalla.
- leave: se refiere al momento en que el elemento sale de la pantalla.
Cada uno de estos estados tiene tres modificadores que representan instantes específicos de la transición [04:28]:
- from: el inicio de la transición.
- active: mientras la transición está en curso.
- to: el momento final de la transición.
La combinación de estos valores produce clases como fade-enter-from, fade-enter-active, fade-leave-to, entre otras. Vue.js aplica y remueve estas clases automáticamente en el momento preciso.
¿Cómo se comportan enter y leave en la práctica?
Al usar fade-enter-active, la clase se aplica mientras el elemento está apareciendo [05:13]. Si en cambio se usa fade-leave-active, el estilo solo se ve cuando el elemento desaparece [05:45]. Esto permite definir comportamientos visuales distintos para la entrada y la salida.
¿Cómo lograr un efecto fade completo con opacity?
Para construir un desvanecimiento suave se necesitan tres clases trabajando juntas [06:36]:
css
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-leave-to {
opacity: 0;
}
.fade-enter-from {
opacity: 0;
}
- fade-enter-active y fade-leave-active definen que la propiedad
opacity se anime durante medio segundo con una curva de tipo ease.
- fade-leave-to indica que al final de la salida la opacidad debe ser cero.
- fade-enter-from establece que al inicio de la entrada la opacidad también es cero [07:38].
El valor por defecto de opacity es 1 (cien por ciento visible), por lo que no es necesario declararlo explícitamente. Con estas tres reglas, el menú se desvanece suavemente al desaparecer y aparece gradualmente al mostrarse [07:55].
¿Qué más se puede animar con transition?
Aunque el ejemplo utiliza opacity, el componente transition funciona con cualquier propiedad CSS animable. Podrías modificar transform, height, background-color o combinar varias propiedades para lograr efectos más elaborados. La clave está en definir correctamente los estados from, active y to para cada dirección de la transición.
Si ya experimentaste con este componente o encontraste combinaciones interesantes de propiedades CSS, comparte tu experiencia en los comentarios.
