Transitions and Animations Chapter 13Adding the done arguments to our function lets Vue know that we want a callback to call
when the animation is finished. We don't need to explicitly use the callback as Vue will
figure it out by itself, but since it's always a bad idea to rely on default behaviors (they can
change if they are not documented), let's call the done function when the animation is
finished:
leave (el, done) {
Velocity(el,
{ opacity: [0, 1], 'font-size': ['0.1em', '1em'] },
{ duration: 200, complete: done })
}Run your code and press the Cancel button to cancel your taxi!
Transitioning on the initial render
With the appear keyword, we are able to package transition for elements when they are
first loaded. This helps the user experience in that it gives the impression that the page is
more responsive and faster to load when you apply it to many elements.
Getting ready
This recipe doesn't assume any particular knowledge, but if you have completed at least
the Adding some fun to your app with CSS transitions recipe, it will be a piece of cake.
How to do it...
We will build a page about the American actor Fill Murray; no, not Bill Murray. You can
find more information about him at http://www.fillmurray.com. We will use images from
this site to fill our page about him.
In our HTML, let's write a header as the title of our page:
<h1>
The Fill Murray Page
</h1>After the title, we will place our Vue application:
<div id="app">
<img src="https://fillmurray.com/50/70">