Introduction

This chapter contains recipes related to transitions and animations. Vue has its own tags for dealing with transitions intended for when an element enters or leaves the scene: <transition> and <transition-group>. You will learn all about them and how to use them to give your customers a better user experience.

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...