Enter and leave transitions in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of <transition> in Vue?

The <transition> component in Vue wraps elements or components to apply enter and leave animations when they appear or disappear from the DOM.

intermediate

Name the CSS classes Vue automatically applies during an enter transition.

Vue applies these classes in order: v-enter-from, v-enter-active, and v-enter-to to control the start, active, and end states of the enter animation.

beginner

How do you trigger a leave transition in Vue?

A leave transition happens when a condition controlling the element/component becomes false and Vue removes it from the DOM, applying v-leave-from, v-leave-active, and v-leave-to classes for animation.

intermediate

What role does the appear attribute play in Vue transitions?

Adding the appear attribute to a <transition> makes Vue apply enter transition classes when the element first renders, not just on later insertions.

advanced

How can you customize transition class names in Vue?

You can set custom class names using props like <code>enter-from-class</code>, <code>enter-active-class</code>, <code>leave-to-class</code>, etc., on the <code>&lt;transition&gt;</code> component.

Which Vue component is used to add enter and leave animations?

A <effect>

B <animate>

C <motion>

D <transition>

The component is the built-in Vue component for handling enter and leave animations.

What class does Vue apply at the start of an element's enter transition?

A v-enter-from

B v-leave-to

C v-enter-active

D v-leave-from

The v-enter-from class sets the initial state before the enter animation begins.

When does a leave transition occur in Vue?

A When the page loads

B When an element is added to the DOM

C When an element is removed from the DOM

D When a component is mounted

Leave transitions happen when Vue removes an element from the DOM, animating its exit.

What does the appear attribute do in a Vue transition?

A Triggers enter animation on initial render

B Disables all animations

C Makes leave animations faster

D Repeats the animation infinitely

The appear attribute makes the enter animation run when the element first appears on the page.

How can you change the default transition class names in Vue?

A By adding classes to the parent element

B By setting props like enter-from-class on <transition>

C By using inline styles only

D By editing Vue source code

Vue allows custom class names via props on the component for flexible styling.

Explain how Vue uses CSS classes to animate an element entering and leaving the DOM.

Think about the start, active, and end states of animations.

Describe how you would add a fade-in effect when a component first appears using Vue transitions.

Focus on the appear attribute and CSS opacity.