Vue.js 2 Cookbook

How it works...

The name of the transition is the first word of the CSS class selectors (fade), and Vue will look for them based on whether the element is appearing or disappearing from the screen. If no name is specified and only <transition> is used, Vue will use the transition name, v for CSS.

In our case, the dragon that was previously invisible is appearing and so, fade-enter will be applied for a tick (a tick is a cycle for refreshing the view, but you can think of it as a frame in an animation). This means the <span> will be effectively invisible at the beginning because the opacity will be set to 0.

After that, the fade-enter class will be removed and fade-enter-active, which was attached to fade-enter, is now the only class remaining. ...