Vue.js 2 Cookbook

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 ...