Scaling UpLesson 38Free preview

Vue Animations

This lesson is part of Vue · All levels

Summary

The built-in Transition component in Vue wraps one element or component to get animated when it goes in, out, or changes. Vue adds CSS transition classes like v-enter-from, v-enter-active, and v-enter-to that you can style yourself. In addition to CSS, Vue also provides a JavaScript hook and a class-based transition for use in animation libraries.

Key points

Transition wrapped one element or component to animate.
The main transition classes: enter-from, enter-active, enter-to, leave-from, leave-active, leave-to.
The class name follows the name of the transition, for example fade-enter-active.
Transition only works on one element at a time.
JavaScript hooks are available for code-based animation.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.