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

The enter method will be called as soon as the taxi emoji is inserted at the press of a button.

The enter method, which you have to add to your Vue instance, looks like this:

methods: {

enter (el) {

Velocity(el,

{ opacity: [1, 0], translateX: ["0px", "200px"] },

{ duration: 2000, easing: "ease-out" })

}

}

Run your code and press the button to book your taxi!

How it works...

As you may have noted, there is no CSS in your code. The animation is purely driven by
JavaScript. Let's dissect our Vue transition a little:

<transition

@enter="enter"

:css="false"

>

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

</transition>

Although this is still a transition that could use CSS, we want to tell Vue to shut down the
CSS and save precious CPU cycles by setting :css="false". This will make Vue skip all

the code related to CSS animation and will prevent CSS from interfering with our pure
JavaScript animation.

The juicy part is in the @enter="enter" bit. We are binding the hook that triggers when

the element is inserted in to the enter method. The method itself is as follows:

enter (el) {

Velocity(el,

{ opacity: [1, 0], translateX: ["0px", "200px"] },

{ duration: 2000, easing: "ease-out" }

)

}

Here, we are calling the Velocity library. The el parameter is passed for free by Vue, and it

refers to the element that was inserted (in our case, the

element containing the emoji of

the car).