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

The frog emoji will turn into a princess emoji:

How it works...

When we wrote the two elements, we used the key attribute specifying who is the frog and

who is the princess. This is because, Vue optimization system will kick in otherwise. It will

see that the content of the two elements can be swapped without swapping the elements
themselves and no transition will ensue since the element was the same and only the

content changed.

If we remove the key attribute, we can see for ourselves that the frog and the princess will

change, but without any transition:

<transition name="fade">

<p v-if="kisses < 3"> frog</p>

<p v-if="kisses >= 3"> princess</p>

</transition>

Consider that we use two different elements, as shown:

<p v-if="kisses < 3" > frog</p>

<span v-if="kisses >= 3"> princess</span>

Also, we modify our CSS selector for

accordingly:

p, span {

margin: 0;

position: absolute;

font-size: 3em;

display: block;

}