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 } })
At this point, we will create our own custom transition in CSS:
.slideInRight { transform: translateX(200px); ...
