Saltar al contenido

Introducción a Vue.js TransitionsDec, 27thIn este tutorial, vamos a aprender acerca de las transiciones en vuejs …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de las transiciones en vuejs con ejemplos. componente de transición

Vue nos proporciona un componente envoltorio que nos ayuda a aplicar transiciones a html elementswhenever se añade o se elimina de la dom un elemento. En

componente tenemos que añadir un atributo llamado nombre.

nombre : El nombre de la clase CSS transición.

cada vez que añadimos un nombre a nuestro vuejs componente de transición nos da diferentes clases CSS con el prefijo nombre.

* representa el nombre de la clase de transición.

* -Introduzca : Estado inicial, esta clase se añade un fotograma antes de insertar nuestro elemento, un fotograma eliminado después de insertar el elemento.

* -Introduzca-activa : Esta clase es aplicada durante la fase de entrada. Añadido antes de insertar un elemento, quitan cuando acabados transición / animación. Esta clase puede ser usada para definir la duración, el retraso y la curva de aceleración de la transición entrante.

*: ingrese a : Finalización de estado para la clase -Introduzca *. Añadido una trama después de que se inserta el elemento (al mismo tiempo * -Introduzca se elimina), elimina cuando acabados transición / animación.

* -leave : Añadido inmediatamente cuando un elemento está saliendo desde el dom, eliminado después de un cuadro.

* -leave-activa: estado activo para la licencia. Aplicada durante toda la fase de salida. Añadido inmediatamente cuando se dispara la transición licencia, eliminado cuando termina la transición / la animación. Esta clase se puede utilizar para definir la duración, el retraso y curva de aceleración para la transición de salir.

* -leave a : Finalización de Estado para la clase * -leave. Añadido un cuadro después de una transición de salida se activa (al mismo tiempo * -leave se elimina) retirados cuando los acabados de transición / la animación.

Ejemplo