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

You can already tell that we will use the taxiCalled variable to keep track of whether the

button has been pressed or not

Let's add an emoji that will confirm to the user when the taxi is called:

<p v-if="taxiCalled"> </p>

At this point, we can add some JavaScript:

new Vue({

el: '#app',

data: {

taxiCalled: false

}

})

Run the application and you will see the taxi appear instantly when you press the button.
We are a cool taxi company, so let's make the taxi drive to us with a transition:

<transition

enter-active-class="animated slideInRight">

<p v-if="taxiCalled"> </p>

</transition>

Now run your application; if you call the taxi, it will get to you by sliding from the right:

The taxi will slide from right to left, as shown: