Transitions and Animations Chapter 13Adding your own transition classes
If your application is rich in animations and you would like to reuse your CSS classes in
other projects by mixing and matching them, this is the recipe for you. You will also
understand an important technique for performant animations, called FLIP (First Last
Invert Play). While the latter technique is normally triggered automatically by Vue, we will
implement it manually to get a better understanding of how it works.
Getting ready
To complete this recipe, you should understand how CSS animations and transitions work.
This is out of the scope of this book, but you can find a good primer
at http://css3.bradshawenterprises.com/. This website is also great because it will
explain when you can use animations and transitions.
How to do it...
We will build an interface for a taxi company (similar to the preceding recipe) that will
enable users to call a taxi at the click of a button and will provide a nice animated feedback
when the taxi is called.
To code the button, write the following HTML:
<div id="app">
<button @click="taxiCalled = true">
Call a cab
</button>
<p v-if="taxiCalled"> </p>
</div>Then, you initialize the taxiCalled variable to false, as shown in the following
JavaScript:
new Vue({
el: '#app',
data: {
taxiCalled: false
}
})