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

Transitions and Animations Chapter 13

How does it work...

Every transition applies four classes. Two are applied when the element enters the
scene and the other two are applied when it leaves:

Name Applied when Removed when

v-enter Before the element is insertedAfter one frame

v-enter-activeBefore the element is insertedWhen transition ends

v-enter-to After one frame When transition ends

v-leave Transition starts After one frame

v-leave-activeTransition starts When transition ends

v-leave-to After one frame When transition ends

Here, the initial v stands for the name of your transition. If you don't specify a name, v will

be used.

While the beginning of the transition is a well-defined instant, the end of

the transition is a bit of work for the browser to figure out. For example, if

a CSS animation loops, the duration of the animation will only be one

iteration. Also, this may change in future releases, so keep this in mind.

In our case, we wanted to provide a third-party v-enter-active instead of writing our

own. The problem is that our library already has a different name for the class of the

animation we want to use (slideInRight). Since we can't change the name of the class, we

tell Vue to use slideInRight instead of looking for a v-enter-active class.

To do this, we used the following code:

<transition enter-active-class="animated slideInRight">

This means that our v-enter-active is called animated slideInRight now. Vue will

append those two classes before the element is inserted and drop them when the transition

ends. Just note that animated is a kind of helper class that comes with animate.css.