A continuación se explican como se puede lograr las Transiciones y Animaciones en VUE a fin que nuestra página o aplicación sea más reactiva y nos permita interactuar con el usuario mejorando su experiencia.

Para aprender backend en Java siga este vínculo

1. Transiciones y animaciones en VUE

Las transiciones y animaciones permiten definir como un componente aparece en pantalla o como desaparee, también se puede programar esta animación cuando el componente se actualiza según el ciclo de vida de los componentes en VUE.

TransicionesVUE
Figura 1. Estados de las animaciones en VUE

La figura 1, muestra el esquema general de lo que sucede cuando se actualiza un componente en el cual se aprecia que el componente pasa de un estado enter a un estado stay este último es en el que permanece mientras no se actualiza el componente, finalmente cuando se actualiza pasa a un estado Leave.

Para que nuestras Transiciones y animaciones en VUE queden estéticamente agradables es importante que la animación comience lento y luego se acelere y luego termine lento, lo anterior se aprecia en la curva que une los estados en la figura 1.

2. Programando los estilos de transiciones

Para programar las Transiciones y animaciones en VUE es necesario crear cuatro estilos que controlaran los diferentes estados y transiciones descritos en la figura 1 y los cuales se pueden apreciar en CSS en el código siguiente.

Estos estilos llevaran un nombre inicial y terminaran con el nombre del estado o transición correspondiente, este nombre inicial es importante porque con el nos referiremos en la sección HTML.

    .efecto-enter {
      opacity: 0;
    }

    .efecto-enter-active {
      transition: opacity 1s ease-out;
    }

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

    .efecto-leave {
    }

Los estilos inician con una propiedad (o varias) que serán modificadas, note que el el efecto efecto-enter-active no especifica un valor final de la propiedad opacity con lo cual se entiende que este valor será el valor por defecto 1, cosa contraria en el siguiente estilo efecto-leave-active en el cual si se especifica el valor final de la propiedad

3. Aplicando los estilos de transiciones y animaciones en VUE al HTML

Una vez se definieron los estilos debemos incluir en nuestro HTML un sección de transición indicando el nombre del efecto y un modo de aplicación.

En este ejemplo el contenido del span estará cambiando con lo cual es importante que definamos un key que identifique el objeto que cambia y así la etiqueta transition pueda identificarlo.

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

Para cambiar el contenido y rotar un mensaje simplemente definimos en el script una función que se ejecuta a intervalos periódicos y que cambia el valor de un índice con el que nos referimos al dato que queremos mostrar en el render declarativo del span.

  <script>
  export default {
    name: 'TarjetaDatos',
    data() {
      return {
        datos: ['VUE', 'React', 'Java', 'Node'],
        indice: 0
      }
    },
    methods: {
      rotarMensaje() {
        this.indice++;
        if(this.indice == this.datos.length) {
          this.indice = 0;
        }
      }
    },
    mounted() {
      setInterval(this.rotarMensaje, 2500);
    }
  }
  </script>

4. Artículos de Interés

Introducción y Características VUE
Hola Mundo en VUE
Modelo MVVM Propiedades Directivas y Eventos en VUE