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-transition que siempre estará presente en el elemento.
    • .fade-enter que aparecerá cuando comience la carga del elemento y donde se puede definir la transición de entrada.
    • .fade-leave que 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

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Uso del componente Vue Resource Lección siguiente Eventos personalizados en Vue.js