Chapter 8. Transitions and animations

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.

8.2. Animations basics

8.3. JavaScript hooks

8.4. Transitioning components

8.5. Updating the pet store application

Exercise

Summary