Vue transition element

up:: Vue animations

transition element

transition applies its class to one direct child. If there are two children below it, it won’t work.

Except if you guarantee that only one child element is added to the real DOM at any time. You need to explicitly use v-if and v-else.

To toggle between two elements in the same place, you can add mode='out-in' on the transition element.

JS methods

There are some built-in methods that you get.

<transition @before-enter='MyEnterFunction'>
	<element/>
</transition>

before-enter   before-leave
enter          leave
after-enter    after-leave

When the method is called, the element is passed in as a function parameter.

Animating with JavaScript

In the methods block, add a function for each of the built-in methods above. In beforeEnter, set the initial state. Then, add an interval over which to increase the opacity by a small fraction.

Note: You have to call done() explicitly to let Vue know when the animation time is done. Otherwise, even when the element has a opacity of 0, it is recognised by Vue as being visible.