Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
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:

Free download pdf