En esta lección número 20 de nuestro Curso de Vue.js aprenderás a agregar efectos de animación o transiciones a través de clases de CSS con Vue.js cuando tus elementos son agregados y eliminados en el DOM de una forma sencilla; permitiéndote crear aplicaciones mucho más llamativas. También, conocerás cómo agregar animaciones usando el library Animate.css.
Repositorio
Ver el código de esta lección en GitHub
Notas
- Documentación oficial de animaciones en Vue.js, el cual se refieren a ellas como Transitions o transiciones.
- Para agregar una transición a un elemento, se agrega el atributo transition a dicho elemento, donde el valor del atributo será el nombre de la transición, por ejemplo:
transition="fade"esto generará las siguientes clases de CSS en el elemento:.fade-transitionque siempre estará presente en el elemento..fade-enterque aparecerá cuando comience la carga del elemento y donde se puede definir la transición de entrada..fade-leaveque aparecerá cuando se elimine el elemento y donde se puede definir la transición de salida.
- El método setTimeOut() de JavaScript recibe como primer parámetro la función a ejecutar y como segundo parámetro la cantidad de milisegundos que espera antes de ejecutarla.
- Se puede trabajar con animaciones personalizadas o también con alguna library como Animate.css
- Puedes usar el CDN de Animate.css buscándolo en https://cdnjs.com/
- Revisa la documentación de Animate.css para agregar las transiciones en tu aplicación.
Material relacionado
- Introducción a las directivas de Vue.js con v-if, v-show y v-else
- Repaso de interpolaciones, v-for, v-if, métodos y filtros con Vue.js
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Uso del componente Vue Resource Lección siguiente Eventos personalizados en Vue.js