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

Getting ready

This recipe, while it presupposes no knowledge of the Velocity library, assumes that you
are quite familiar with animations either in CSS or with JavaScript libraries, such as jQuery.

If you've never seen a CSS animation and you want a speedy introduction, just complete
the two preceding recipes and you should be able to follow along.

How to do it...

We're still looking for the perfect transition for a taxi company (the same as in the

preceding recipe) that will entertain our clients while waiting for a taxi. We have a button

to call a cab and a little taxi emoji that will appear when we make a reservation.

Before anything else, add the Velocity library as a dependency to your project--https:/​/

cdnjs.​cloudflare.​com/​ajax/​libs/​velocity/​1.​2.​3/​velocity.​min.​js.

Here is the HTML to create the skeleton of our interface:

<div id="app">

<button @click="taxiCalled = true">

Call a cab

</button>

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

</div>

Our Vue model is very simple and consists only of the taxiCalled variable:

new Vue({

el: '#app',

data: {

taxiCalled: false

}

})

Create the animation by wrapping the little taxi in a Vue transition:

<transition

@enter="enter"

:css="false"

>

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

</transition>