Vue.js 2 Cookbook

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 inserted	After one frame
v-enter-active	Before the element is inserted	When transition ends
v-enter-to	After one frame	When transition ends
v-leave	Transition starts	After one frame
v-leave-active	Transition 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 ...