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 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 for that element:

<transition appear name="myTransition">

<p>My element</p>

</transition>

The preceding code will look for classes named as follows:

.myTransition-enter {...}

.myTransition-enter-active {...}

Vue will look for the default CSS classes for the element insertion (v-enter and v-enter-

active) if everything else fails. Incidentally, this is what we have done in our recipe.

Relying on these defaults is not a good practice; here, we have done it just

as a demonstration. You should always give names to your transitions.