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

This will set the opacity to zero just before the animation begins (and hence, before the

element is inserted). This will help in slower browsers in which forcefeeding will still
display a flash of the car before bringing it all the way to the right and starting the

animation.

The possible hooks for JavaScript animations are summarized in this table:

Attribute Description

@before-enter This function is called before the element is inserted.

@enter This function is called when the element is inserted.

@after-enter This function is called when the element is inserted and the animation is finished.

@enter-cancelled

This function is called when the animation is still in progress, but the element has

to leave. If you use Velocity you can do something like Velocity(el,

"stop").

@before-leave This function is called before the leave function is triggered.

@leave This function is called when the element leaves.

@after-leave This function is called when the element leaves the page.

@leave-cancelledThis is called in case the element has to be inserted before the leave call is

finished. It works only with v-show.

Just be reminded that these hooks are valid for any library, not just

Velocity.

There's more...

We can try another take with this interface by implementing a cancel button. If the user
booked a cab by mistake, hitting cancel will delete the reservation, and it will be apparent

by the fact that the little taxi emoji disappears.

First, let's add a cancel button:

<button @click="taxiCalled = false">

Cancel

</button>