Transitions and Animations Chapter 13That 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 is making the emoji disappear while scaling it down.
If you try to run your code, you will encounter some problems.
When you click on the cancel button, what should happen is the leave animation should
start and the taxi should become smaller and eventually disappear. Instead, nothing
happens and the taxi disappears abruptly.
The reason the cancel animation doesn't play as planned is because since the animation is
written in JavaScript instead of CSS, Vue has no way to tell when the animation is finished.
In particular, what happens is that Vue thinks that the leave animation is finished before it
even starts. That is what makes our car disappear.
The trick lies in the second argument. Every hook calls a function with two arguments. We
have already seen the first, el, which is the subject of the animation. The second is a
callback that when called, tells Vue that the animation is finished.
We will leverage the fact that Velocity has an option called complete, which expects a
function to call when the animation (from the Velocity perspective) is complete.
Let's rewrite our code with this new information:
leave (el, done) {
Velocity(el,
{ opacity: [0, 1], 'font-size': ['0.1em', '1em'] },
{ duration: 200 })
}