Transitions and Animations Chapter 13
Vue transitions are pretty powerful in that they are completely customizable and can easily
combine JavaScript and CSS styling while having very intuitive defaults that will let you
write less code in case you don't want all the frills.
You can animate a great deal of what happens in your components even without transition
tags since all you have to do is bind your state variables to some visible property.
Finally, once you have mastered everything that there is to know about Vue transitions and
animations, you can easily package these in layered components and reuse them
throughout your application. This is what makes them not only powerful, but also easy to
use and maintain.
Integrating with third-party CSS animation
libraries such as animate.css
Graphical interfaces not only need to be usable and easy to understand; they should also
provide affordability and be pleasant to use. Having transitions can help a great deal by
giving cues of how a website works in a fun way. In this recipe, we will examine how to use
a CSS library with our application.
Getting ready
Before starting, you can take a look at https://daneden.github.io/animate.css/, as
shown, just to get an idea of the available animations, but you don't really need any special
knowledge to proceed: