Vue.js in Action

Chapter 8. Transitions and animations

This chapter covers

• 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 ...