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

Now if we launch our application again, everything works without using any key attribute.

Using keys is generally recommended even when not necessary, like in

the preceding case. This is especially true when items have a different

semantic meaning. There are a couple of reasons for this. The main reason

is that when multiple people work on the same line of code, modifying the

key attribute will not break the application as easily as switching a span

element back into a p element, which will ruin the transition as we just

saw.

There's more...

Here, we cover two subcases of the preceding recipe: switching between more than two

elements and binding the key attribute.

Transitioning between more than two elements

We can expand on the recipe we just completed in a straightforward manner.

Let's suppose that if we kiss the princess too many times, she will turn into Santa Claus,
which may or may not be appealing, depending on your age I guess.

First, we add the third element:

<transition name="fade">

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

<p v-else-if="kisses >= 3 && kisses <= 5" key="princess"> princess</p>

<p v-else key="santa"> santa</p>

</transition>

We can launch the application immediately and when we kiss the princess/frog more than

five times, Santa will appear with the same fading transition: