Chapter 8. Transitions and animations
- Understanding transition classes
- Using animations
- Adding JavaScript hooks
- Updating the pet store application
In chapter 7 we looked at advanced components and discussed how we could use single-file components to break our application into smaller parts. In this chapter we’ll look at transitions and animations using Vue.js. We’ll create simple transitions and animations using these built-in animation/transition classes. After this, we’ll use JavaScript hooks to create animations. We’ll then look at transitions between components. At the end of the chapter we’ll update our pet store application and add transitions and animations to it.
8.1. Transitions basics
To create a transition in Vue.js, you must first understand the <transition> component element. This is a special element that signifies to Vue.js that you want to transition or animate one or more elements. The <transition> element wraps a conditional, a dynamic component, or a component root node.
The transition component is either inserted or removed from the DOM, depending on certain conditions. For example, a v-if directive may add or remove an element that it surrounds. The transition component can recognize if there are any CSS transitions or animations when this action occurs. It will then either remove or add the CSS classes at the appropriate time to create the transition or animation. You can also add special JavaScript hooks to the component to create more complex scenarios. If no CSS transitions or animations are found, the DOM operations for insertion and removal will happen immediately; otherwise, the transition or animation occurs. Let’s look at an example.
Imagine you’re creating a website with a list of book titles. You want the user to toggle the description on or off by clicking the title. As we’ve learned in previous chapters, we can use a v-if directive to do this.
But you want the description to slowly fade in after clicking the title. You then need it to fade out after clicking the title again. You can do this in Vue.js using CSS transitions and the <transition> element.
Open your editor and create an application, as you see in listing 8.1. To begin, create a simple application that shows a fictitious title of an imaginary book as an <h2> tag at the top of the page. We’ll surround this element by a <div> tag and attach a click event to it using @click. The purpose of this click event is to toggle a variable named show. If show is true, and the user clicks the button, it toggles it to false. If it’s false, it will toggle to true.
Inside the body tag you’ll need to add your new transition element. Transition elements can also have a name attribute. Set the name to fade. Wrapped inside the transition element is the v-if directive. This directive will toggle the description. At the bottom of our application, add the Vue constructor with the data function. This will hold all the variables for our application.
Listing 8.1. Creating a description transition: chapter-08/transition-book-1.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app" >
<div @click="show = !show"> 1
<h2>{{title}}</h2>
</div>
<transition name="fade"> 2
<div v-if="show"> 3
<h1>{{description}}</h1>
</div>
</transition>
</div>
<script>
new Vue({ 4
el: '#app',
data() { 5
return {
title: 'War and Peace',
description: 'Lorem ipsum dolor sit amet,
consectetur adipiscing elim',
show: false
}
}
});
</script>
</body>
</html>
- 1 Denotes the div tag that toggles variable show to be true or false
- 2 Shows the new transition element that’s named fade
- 3 Shows the v-if directive that toggles showing the description or not
- 4 Notes the Vue.js constructor
- 5 Shows the data function with variables
Load the application in a browser and open it. You should see a page that looks like figure 8.1. If you click the title, the description will pop up below it. This example has no transition at all. Clicking the title toggles the description either off or on. To add the transition, we must add the transition classes.
Figure 8.1. Toggle without any transition
Using listing 8.1, add a style tag inside the head element. For the purposes of simplicity, we’ll inline the CSS inside the style tags in our example. That way, we don’t have to worry about adding a separate CSS file.
There are six Vue.js CSS classes that can be applied to the enter and leave transitions. In this example we’ll use four: v-enter-active, v-leave-active, v-enter, and v-leave-to. The other two we’ll use later are v-enter-to and v-leave.
In listing 8.1, we didn’t add any animation classes. As I mentioned earlier, if no CSS classes are present, the v-if directive conditional fires immediately and there are no CSS transitions. We’ll need to add CSS transition classes to make the fade effect work. First, let’s look at what each of these classes does and when they’re added or deleted from the DOM. Be aware that a frame is an array-like property that represents all elements in the current window. Table 8.1 shows all the CSS transition classes that you should be aware of.
Table 8.1. CSS transition classes
|
Transition class |
Description |
|---|---|
| v-enter | This is the first state. It is added before the element is inserted and removed one frame after the element is inserted. |
| v-enter-active | This class is added to the element as long as the element is entering the DOM. It’s inserted before the element is inserted and removed when the transition/animation is finished. This is where you enter in the duration, delay, and easing curve for the entire transition. |
| v-enter-to | This class was introduced in Vue.js 2.1.8+. This is added one frame after the element is inserted and removed when the transition/animation is finished. |
| v-leave | This class is added as soon as the element is leaving, or being removed, from the DOM. It’s removed after one frame. |
| v-leave-active | This is the active state for the leave animation/transition. This is similar to the v-enter-active. You can use it to set the duration, delay, and easing curve of the leaving transition/animation. It’s added immediately when the leave transition is triggered and removed when the transition/animation finishes. |
| v-leave-to | This is similar to the v-enter-to and was added after Vue.js 2.1.8+. This is the ending state for the leave. It’s added one frame after a leaving transition is triggered and removed when the animation/transition is finished. |
Each of these classes is added and removed at different times when elements in the DOM are added or removed. We can use these elements to construct transitions and animations. For more information on the transition classes, check out the official documentation at http://mng.bz/5mb2.
Let’s add the transitions in the style element inside the head. Before we add these classes, you may have noticed in listing 8.1 that we added a name attribute to the transition element. Because we added a name attribute, the CSS class names will begin with the name we added, fade, instead of v-. If we chose not to add the name attribute to the transition element, the names of the classes would have remained: v-enter-active, v-leave-active, and so on. Instead, the class names will start with fade, fade-enter-active, and fade-leave-active, for example.
Add the fade-enter-active and fade-leave-active CSS transition classes inside the style tag in the application code from the previous listing. As mentioned, active classes are where we put the CSS transitions with the delay. In this example we’ll set opacity, 2.5 seconds, and ease-out. This will create a nice fade effect that will take 2.5 seconds to complete.
Next, we’ll add a fade-enter and fade-leave-to. This will set our initial opacity to 0. This will make sure that the fade occurs correctly with the opacity at 0. Update the previous example with the new style and see how it works. For the sake of simplicity, I’ve removed the other code, and because it’s the same as listing 8.1. You can always consult the completed code that’s included with the book.
Listing 8.2. Description transition with fade: chapter-08/transition-book.html
...
<style>
.fade-enter-active, .fade-leave-active { 1
transition: opacity 3.0s ease-out;
}
.fade-enter, .fade-leave-to { 2
opacity: 0;
}
</style>
...
- 1 Active states show the duration and easing of transition.
- 2 Enters and leaves states for opacity 0
Load this in your browser and open the development tools. You may notice something interesting when you click the title of the book and look at the source. For 3.0s you’ll see a new class that surrounds the description, fade-enter-active and fade-enter-to. You can see it in figure 8.2.
Figure 8.2. Classes when element is being added to the DOM
These classes will show up only for the duration of the fade. Afterward, the classes will be removed. If we click the title again, it will begin fading out the text. You can see in the browser fade-leave-active and fade-leave-to are added to the HTML node during the transition in figure 8.3.
Figure 8.3. Classes shown when the element is removed from the DOM.
These classes are added momentarily while the element is being removed from the DOM. This is how Vue.js creates its animations and transitions. By adding and removing classes at different times, elements in Vue.js can create neat transitions and animations.
8.2. Animations basics
Animations are another important feature that Vue.js is good at. You may be wondering what the difference is between animations and transitions. Transitions are moving from one state to another, whereas animations have multiple states. In the last example, we went from seeing the text to fading the text. We also saw a transition from no text on the page to fading the text back in.
Animations are a bit different. You can have multiple states for each animation that can be within one declaration. You can do neat stuff with animations, such as create complex movements and chain multiple animations together. Animations can act like transitions too, but they aren’t transitions.
Let’s take the same example from listing 8.2 and add an animation. We’ll use the same code, except this time we’ll add a nice bounce effect using CSS keyframes. We want the animation to fade in and scale when the title is clicked. When the title is clicked again, we want the animation to scale and fade out. Open your text editor and copy listing 8.2. Update the transition name to bounce, as seen in listing 8.3.
Listing 8.3. Animation with scale: chapter-08/animation-book-1.html
<div @click="show = !show">
<h2>{{title}}</h2>
</div>
<transition name="bounce"> 1
<div v-if="show">
<h1>{{description}}</h1>
</div>
</transition>
- 1 Shows the bounce transition
Now we need to add our new animation. This animation needs the enter-active and leave-active classes. Begin by deleting the old CSS transition elements. Then add the bounce-enter-active and the bounce-leave-active classes. Add a CSS animation with a bounceIn of 2s inside the bounce-enter-active class. Add the same to the bounce-leave-active class and add a reverse.
Next create the CSS keyframes. Use @keyframes and add 0%, 60%, and 100%. We’ll use CSS transform with a scale of .1 for 0%, 1.2 for 60%, and 1 for 100%. We’ll also change the opacity from 0 to 1. Add this into the style as shown here.
Listing 8.4. Animation with scale full: chapter-08/animation-book.html
...
<style>
.bounce-enter-active { 1
animation: bounceIn 2s;
}
.bounce-leave-active { 2
animation: bounceIn 2s reverse;
}
@keyframes bounceIn { 3
0% { 4
transform: scale(0.1);
opacity: 0;
}
60% { 5
transform: scale(1.2);
opacity: 1;
}
100% { 6
transform: scale(1);
}
</style>
- 1 Enters active state that uses keyframe bounceIn
- 2 Leaves active state that uses keyframe bounceIn
- 3 Shows the keyframes for animation
- 4 0% animation transforms the scale to 0.1 and sets the opacity at 0.
- 5 60% animation transforms the scale to 1.2 and sets the opacity at 1.
- 6 Final animation at 100% transforms the scale to 1.
Open the file in your browser and check out the animation. You should see the fade in and scale occur when you click the title of the book. If you click it again, it will fade away. Figure 8.4 is a screenshot of the animation halfway through.
Figure 8.4. Screenshot of transition
The animation creates an effect where the text gets bigger and shrinks at the end.
8.3. JavaScript hooks
The transition and animation classes Vue.js provides should cover most basic transitions and animations you need, but Vue.js gives us an even more robust solution if we need it. We can set JavaScript hooks to do even more complex transitions and animations. We do this by combining the hooks with JavaScript that manipulate and direct CSS.
These hooks may remind you of the hooks we discussed in an earlier chapter for the Vue.js lifecycle. These JavaScript hooks are similar but are used for only transitions/animation. Remember a few things before using these hooks. First, we must always use the done callback when using the enter and leave hooks. Otherwise, they’ll be called synchronously and the transition will finish right away. In addition, it’s a good idea to add v-bind:css="false" when using JavaScript-only transitions so that Vue can skip all the CSS detection for that transition. One last thing to remember is that all hooks have the el, or element parameter, passed in except for enter and leave, which also passes done as a parameter. Don’t worry if this is a little confusing; I’ll show you in the next section how this works.
The JavaScript hooks that we can use when entering are beforeEnter, enter, afterEnter, and enterCancelled. When a transition is leaving, there’s beforeLeave, leave, afterLeave, and leaveCancelled. All these hooks are triggered at various times of the animation.
Let’s imagine we’re updating our book example to use the same sort of animations we were using earlier, except this time, we want to use JavaScript hooks instead of the CSS classes. How can we do this? Let’s begin by taking our program from listing 8.4 and deleting the bounce-enter-active and the bounce-leave-active classes. We’ll leave the keyframes in. Instead, we’ll use the JavaScript hooks for enter and leave to do the animation in JavaScript.
Let’s change the transition element so it has all the JavaScript hooks listed. To do this we’ll need to use the v-on directive or use the @ sign for short. Add the JavaScript hooks for before-enter, enter, before-leave, leave, after-leave, after-enter, enter-cancelled, and leave-cancelled.
Listing 8.5. JavaScript hooks transition: chapter-08/jshooks-1.html
<transition name="fade" 1
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">
- 1 Shows all the hooks for the transition
Next, we’ll need to add the JavaScript hooks in our methods object inside the Vue instance. To make this work correctly, we’ll need to detect when the animation is completed. That way, we can clear the style and run done on the event. done is the parameter that’s used in the enter and leave JavaScript hooks. done must be executed in these hooks. To do that, we’ll create a new event listener.
The event listener waits until the animation completes by looking for animationend. When the animation completes, the callback will reset the style and execute done. We’ll add this code above the Vue constructor in your HTML file, as shown here.
Listing 8.6. JavaScript hooks event listener: chapter-08/jshook-2.html
function addEventListener(el, done) {
el.addEventListener("animationend", function() { 1
el.style="";
done();
});
- 1 The Event listener watches for the animation to end.
Even though we’re using only leave and enter, let’s add all the JavaScript hooks to our program. Each hook will write to the console log so you can get a better idea when they’re triggered.
Add a new methods object to your Vue.js instance. Add all the JavaScript hooks that you added to the transition to that methods object. Inside the enter method, add a function to call the addEventListener that was created earlier and make sure to pass in the element and done, as you can see in listing 8.7. Next, we’ll use JavaScript to set up the animation. The el.style.animationName is the name of the keyframe animation we created inside the style. The el.style.animationDuration will be set to 1.5 s.
Inside the leave hook, add the same animationName and animationDuration. We’ll also add an el.style.animationDirection and set it to reverse. This will reverse the animation when the element is leaving the DOM.
Listing 8.7. JavaScript hooks methods: chapter-08/jshooks.html
...
methods: {
enter(el, done) { 1
console.log("enter");
addEventListener(el,done); 2
el.style.animationName = "bounceIn"
el.style.animationDuration = "1.5s";
},
leave(el, done) { 3
console.log("leave");
addEventListener(el,done); 4
el.style.animationName = "bounceIn"
el.style.animationDuration = "1.5s";
el.style.animationDirection="reverse";
},
beforeEnter(el) { 5
console.log("before enter");
},
afterEnter(el) { 6
console.log("after enter");
},
enterCancelled(el) { 7
console.log("enter cancelled");
},
beforeLeave(el) { 8
console.log("before leave");
},
afterLeave(el) { 9
console.log("after leave");
},
leaveCancelled(el) { 10
console.log("leave cancelled");
}
}
});
...
- 1 The enter hook
- 2 Inside the enter hook is a call to the addEventListener function.
- 3 The leave hook
- 4 Inside the leave hook is a call to the addEventListener function.
- 5 The beforeEnter hook
- 6 The afterEnter hook
- 7 The enterCancelled hook
- 8 The beforeLeave hook
- 9 The afterLeave hook
- 10 The leaveCancelled hook
After running this example, it should behave exactly like the book example in listing 8.4. Click the title and the animation will begin. If you click again, the animation will start in reverse. Keep an eye on the console. When you first click the title, you’ll see a few messages, before enter, enter, and then after enter, as seen in figure 8.5.
Figure 8.5. Hooks triggered after clicking title
This is the order the hooks are executed. The after enter doesn’t fire until the animation is completed. After clicking the title button again, we can see the order in which the hooks are triggered. First is before leave, then leave, and finally after leave, as you can see in figure 8.6.
Figure 8.6. Hooks triggered when element is removed from the DOM.
If you look at the source, you’ll also notice the CSS being added and removed after every click. This is much like the CSS transition classes we saw previously.
8.4. Transitioning components
In the previous chapter we looked at dynamic components. These are components that we can swap out easily by use of the is attribute which points to a variable that’s used to reflect the current component selected.
We can use transitions with components the way we did with the v-if conditional directive that we used earlier. To make things easier, we’ll modify the dynamic-components.html example from chapter 7. Grab a copy of listing 7.5 and make the changes that follow.
First surround the dynamic component, <component :is="currentView"/>, with the <transition name="component-fade"> element. Before we go on, let’s introduce transition modes.
By default, when transitioning components, you’ll notice that one component will transition in while the other transitions out. This might not always be the desired outcome. We can add an attribute to our transition called mode. We can either have it set to in-out or out-in. If the element is set to in-out, the new element transitions in first; then when complete, the current element transitions out. But when it’s set to out-in the current element transitions out first; then when complete, the new element transitions in. This out-in is what we need for our example so that way the previous component fades out before the new one appears. In this case, let’s surround our dynamic component with <transition name="component-fade" mode="out-in">.
Next, we need to add in our transition classes, as shown in the following listing. Add the transitions class component-fade-enter-active and the component-fade-leave-active. We’ll add an opacity:0 to the component-fade-enter and the component-fade-leave-to. This is the completed code.
Listing 8.8. Transitioning dynamic components: chapter-08/component-transition.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<style>
.component-fade-enter-active, .component-fade-leave-active { 1
transition: opacity 2.0s ease;
}
.component-fade-enter, .component-fade-leave-to { 2
opacity: 0;
}
</style>
</head>
<body>
<div class="app">
<button @click="cycle">Cycle</button>
<h1>
<transition name="component-fade" mode="out-in"> 3
<component :is="currentView"/>
</transition>
</h1>
</div>
<script>
const BookComponent ={
template: `
<div>
Book Component
</div>
`
}
const FormComponent = {
template: `
<div>
Form Component
</div>
`
}
const HeaderComponent = {
template: `
<div>
Header Component
</div>
`
}
new Vue({
el: '.app',
components: {'book-component': BookComponent,
'form-component': FormComponent,
'header-component': HeaderComponent},
data() {
return {
currentView: BookComponent
}
},
methods: {
cycle() {
if(this.currentView === HeaderComponent)
this.currentView = BookComponent
else
this.currentView = this.currentView === BookComponent ?
FormComponent : HeaderComponent;
}
}
})
</script>
</body>
</html>
- 1 Shows the transition classes used to fade component
- 2 Shows the transition class used to set the opacity
- 3 Shows the transition component with the mode out-in
Open a browser with the current code and you’ll see a Cycle button. Click the Cycle button and the previous component, Book Component, will fade out and the new component, Form Component, will fade in. Figure 8.7 shows a screenshot of the fade halfway through.
Figure 8.7. In-between transition of components
If you click the Cycle button again, the Form component will fade away to the Header component. It then starts over again at Book.
8.5. Updating the pet store application
We updated the pet store application in the last chapter when we switched it over to using Vue CLI with single-file components. Now that we have the power of transitions and animations, let’s update the app to give it a little more flair.
Keep in mind that, depending on the web application you’re creating, animations and transitions might be overkill. Unless you’re creating a highly interactive app, you should probably stick to fewer animations and transitions. For this app, we’ll add one animation and one transition. Let’s look at the transition first.
8.5.1. Adding a transition to the pet store application
In our app, we want the page to fade in and out between routes. Let’s add a simple fade-in and fade-out transition when navigating to the checkout page and back to the home page. As we did before, we’ll use the Vue.js animation classes to accomplish this. Figure 8.8 shows what it will look like mid-transition from the home page to the checkout page.
Figure 8.8. Page transitioning to the checkout page
Retrieve the pet store application we were working with in chapter 7 from the code included with this book. Go into the App.vue file inside the src folder. This file is where we set up our router from chapter 7. Similar to what we did with our previous examples, add a transition element and have it surround the router-view. Make sure to add the mode out-in as you see in listing 8.9.
Next, add the fade-enter-active and the fade-leave-active class to the style tag at the bottom. Set the transition to opacity with a .5s ease-out. Add the fade-enter and the fade-leave-to classes and set the opacity to 0.
Listing 8.9. Adding transition to pet store: chapter-08/petstore/src/App.vue
<template>
<div id="app">
<transition name="fade" mode="out-in"> 1
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
}
.fade-enter-active, .fade-leave-active { 2
transition: opacity .5s ease-out;
}
.fade-enter, .fade-leave-to { 3
opacity: 0;
}
</style>
- 1 Transition component with mode out-in surrounds the router-view.
- 2 Vue.js transition classes that set the transition.
- 3 Vue.js transition classes that set the opacity.
After making these changes, save the file and run the npm run dev command. This will start the web server, and the web page should pop up in your browser. If not, navigate to localhost:8081 and check out the application. Click the checkout button and the home page and you’ll see the page fade.
8.5.2. Adding an animation to the pet store application
When adding items to the cart, we added several v-if, v-else-if, and v-else directives. This lets the user know how much inventory is left that they can add to their cart. When the inventory runs out, an All Out message is displayed. Let’s add an animation that shakes the text and briefly turns it red when the inventory is depleted for any item. To do this, we’ll use the Vue.js animation CSS classes we learned about earlier. Figure 8.9 shows an example of how it will look with the All Out! animation moving left and right.
Figure 8.9. All Out! animation. The text moves left and right.
Open the Main.vue file and scroll all the way to the bottom. We’re going to use one of the animation classes, enter-active, to create this animation. We don’t need to worry about the animation when the element is removed from the DOM, so we’ll skip adding the leave-active class.
Add an animation that shakes the text for around .72 seconds. We’ll use a CSS cubic-bezier and a transform. In addition, we’ll set up animation keyframes at every 10%. Copy this listing to the Main.vue file.
Listing 8.10. Add animation to pet store: chapter-08/petstore/src/components/Main.vue
...
<style scoped>
.bounce-enter-active { 1
animation: shake 0.72s cubic-bezier(.37,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
@keyframes shake { 2
10%, 90% {
color: red;
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
color: red;
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
...
- 1 Enter the active class that starts the animation.
- 2 Shows specific keyframes
After adding the CSS, we’ll need to add the transition element for our animation. In the Main.vue file, look for the inventory messages. Each message will have the class of inventory-message. Add the <transition> element and surround the inventory-message. Make sure to add the mode="out-in" to the transition as you can see from listing 8.11.
In the previous examples, we transitioned or animated only one element. To animate more than one element, we need to add a key attribute to the v-else-if and v-if directives. Otherwise, Vue’s compiler won’t animate the content correctly.
The Key Attribute
The key attribute is needed whenever you want to transition elements that have the same tag name. To make them distinct, you must add a unique key attribute. It’s good practice to always add the key attribute when you’re dealing with multiple items within a transition component.
Add a key attribute to the v-else-if and v-if directives. For the v-else-if, the key will be empty. This is intentional, so it won’t animate. For the v-if directive we’ll set the key to 0, as shown here.
Listing 8.11. Add animation to pet store transition element: chapter-08/petstore/src/components/Main.vue
...
<transition name="bounce" mode="out-in"> 1
<span class="inventory-message"
v-if="product.availableInventory - cartCount(product.id) === 0"
key ="0"> 2
All Out!
</span>
<span class="inventory-message"
v-else-if="product.availableInventory - cartCount(product.id) < 5"
key=""> 3
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message"
v-else key="">Buy Now!
</span>
</transition>
...
- 1 The transition for bounce with a mode attribute
- 2 The key is added to v-if and set to zero.
- 3 Another key is added so it won’t animate.
Start the web server by running the npm run dev command and try out the app. Click the add to cart button until the inventory runs out. You’ll see the All Out text move and shake for a few seconds and turn red.
Exercise
Use your knowledge from this chapter to answer this question.
- What’s the difference between an animation and a transition?
See the solution in appendix B.
Summary
- Transitions can move elements on your page.
- Animations can be scaled, and you can shrink text on the page programmatically.
- JavaScript animation hooks can be used to make complex animations.
- Transitions with dynamic components are useful for cycling through text.