Del curso: Vue.js esencial

Transiciones en Vue.js utilizando hooks - Tutorial de Vue.js

Del curso: Vue.js esencial

Comenzar mi mes de prueba gratis Comprar para mi equipo

Transiciones en Vue.js utilizando hooks

“

Cuando trabajamos con transiciones en Vue, podemos utilizar clases para configurar cómo una transición se va a ejecutar. También hay una manera de utilizar JavaScript en lugar de clases para poder hacer esta implementación. Como en este ejemplo que ves aquí, puedes notar que este texto ejecuta una animación que es un poco más compleja. Para poder hacer este tipo de animación, podemos utilizar hooks. Dentro del código del componente que vistes anteriormente, puedes encontrar la instancia del objeto transition. Aquí puedes notar que la configuración es diferente. Primero estamos pasando un valor de false al prop css del componente. Esto para indicarle al componente de que esta transición no va a utilizar animaciones de CSS. Y aquí luego estoy definiendo cada uno de los hooks que voy a utilizar para poder animar el texto. Puedes ver que estoy utilizando la directiva v-on o su manera corta y luego llamo el nombre del evento o del hook y luego paso el nombre de una función. Las funciones están definidas dentro del código del componente, como puedes ver aquí. Yo aquí estoy utilizando la librería GreenSock para poder hacer la animación. Esta es una librería JavaScript que podemos utilizar para crear animaciones complejas. Entonces, aquí en este ejemplo, yo estoy utilizando esa librería para poder hacer los efectos de animación que vistes anteriormente. Esta es una técnica muy útil que puedes utilizar a la hora de crear interfaces altamente interactivas con muchas animaciones.

Contenido