How it works...

The appear directive in the transition tag will make the components appear for the first time with an associated transition (if it is found).

There are many possible ways to specify a transition on the first rendering of the component. In all cases, the appear directive must be specified.

The first things Vue will look for when this directive is present are JavaScript hooks or CSS classes specified in the tag:

<transition   appear   @before-appear="customBeforeAppearHook"   @appear="customAppearHook"   @after-appear="customAfterAppearHook"   appear-class="custom-appear-class"   appear-active-class="custom-appear-active-class" >   <p>My element</p> </transition>

After that, if a name is specified, Vue will look for an entrance transition ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.