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

Next, we need the frog and the princess that we will add immediately after the button:

<transition name="fade">

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

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

</transition>

The fade transition is the following CSS:

.fade-enter-active, .fade-leave-active {

transition: opacity .5s

}

.fade-enter, .fade-leave-active {

opacity: 0

}

To make it work properly, we need a last CSS selector to add:

p {

margin: 0;

position: absolute;

font-size: 3em;

}

If you run the application and click enough times the kiss button, you should see your frog
turn into a princess:

This transition will have a fade effect: