In this chapter, we looked at working with transitions and animations in Vue.js. Specifically, we examined how transitions and animations work in CSS. We examined the differences between transitions and animations in CSS and established the rules for both. We worked with the transition and transition-group elements in Vue, and we discussed animation hooks and their grouping into enter and leave transitions. We saw how transition components can be named and, given key values and how we can assign custom transition classes for easier integration with third-party animation libraries.
We explained when to use transition modes and how to further tweak our animations with :duration
and conditional
directives. We mentioned the importance of binding CSS styles in Vue and how this approach can be used for adding animations to our web apps. Finally, we saw how to convert CSS class-based transitions into JavaScript-based animation hooks.
In the next chapter, we will discuss how to use Vuex.