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>
That was easy enough; now we add our leave transition:
<transition @enter="enter" @leave="leave" :css="false" > <p v-if="taxiCalled"></p> </transition>
That brings us to our leave method:
leave (el) { Velocity(el, { opacity: [0, 1], 'font-size': ['0.1em', '1em'] }, { duration: 200}) }
What we are doing ...
