Cuando programamos en el front indiscutiblemente es necesario aprender a generar animaciones que mejoren la experiencia del usuario, en la sección de transiciones vimos como podemos manejar efectos para la aparición de elementos, estas transiciones se complementan muy bien cuando utilizamos Animaciones usando Keyframes CSS que permitiran una flexibilidad completa en nuestra animación

Para aprender backend en Java siga este vínculo

1. Definición de estilos de animación keyframes CSS

Lo primero antes de construir nuestras Animaciones es definir las keyframes CSS, lo cual es muy simple, tan solo con utilizar la etiqueta @keyframes indicar un nombre y definir los estados inicial y final de nuestra animación, tal como se muestra en el código de la siguiente sección.

@keyframes efecto-in {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Aquí es importante notar que existen muchas transformaciones y que la que se ha escogido en este ejemplo recibe un valor de 1 o 0 equivalente a 100% o 0%.

2. Agregado de Animaciones usando keyframes CSS a las transiciones

Para que nuestros @keyframes se puedan usar como animaciones es necesario asociarlos a las transiciones de forma muy similar a como se definió la propia transición.

.efecto-enter {
  opacity: 0;
}

.efecto-enter-active {
  transition: opacity 1s ease-out;
  animation: efecto-in 0.4s ease-out forwards;
}

.efecto-leave-active {
  transition: opacity 0.5s ease-out;
  animation: efecto-out 0.2s ease-out forwards;
  opacity: 0;
}

Note que la transición de salida leave-active debe especificar en este caso el valor de la propiedad opacity. Adicionalmente que la animación estar repetida en bucles infinitos y para evitarlo se hace uso de la directiva forwards.

Finalmente, a nivel del HTML se da un cambio pequeño en el cual podamos animar por completo el div que contiene la información, a su vez este div ( o el elemento sobre el que recaiga la animación debe tener un id para poder aplicarlo.

<transition name="efecto" mode="out-in">
  <div id="nav" class="tarjeta" :key="indice">
    <span :key="indice" > {{ datos[indice] }} </span>
  </div>
</transition>

3. Especificación de propiedades según avance de animación

Un último punto útil cuando hacemos animaciones usando @keyframes CSS es que podemos especificar diferentes valores del avance de la animación, cuando hemos usado from y to estos se entienden como 0% y 100% respectivamente, pero podemos especificarlo explicitamente y así indicar un valor de avance de la transformación a medida que la animación ocurre.

En el siguiente ejemplo se exagera un poco la transformación en Y justo antes que llegue que termine la animación.

@keyframes efecto-in {
  0% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1.4);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Estéticamente, estas animaciones exageradas deben usarse con cuidado en sitios específicos y aplicarlas una sola vez para que no cansen al usuario y su experiencia no se vea impactada.

4. Artículos de Interés

Escribir Archivos VUE JS y Componentes
Estáticos y Constructores en Java
Modelo MVVM Propiedades Directivas y Eventos en VUE