Transitioning between elements

Everything on a web page is an element. You can easily make them appear and disappear, thanks to Vue v-if and v-show directives. With transitions, you can easily control how they appear and even add magic effects. This recipe explains how to do it.

Getting ready

For this recipe, you should have some familiarity with Vue transitions and how CSS works. This is easily achieved if you complete the Adding some fun to your app with CSS transitions recipe from Chapter 2, Basic Vue.js Features.

How to do it...

Since we talked about magic, we will turn a frog into a princess. The transformation itself will be a transition.

We will instantiate a button that, when pressed, will represent a kiss to the frog:

<div id="app"> 
  <button @click="kisses++">
Kiss!</button> 
</div>

Every time the button is pressed, the variable kisses increases. The variable will be initialized to zero, as the following code shows:

new Vue({ 
   el: '#app', 
  data: { 
   kisses...