-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Vue.js 2 Cookbook
By :

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