Enter and leave transitions in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the element with a Vue transition component.

Vue

<template>
  <[1] name="fade">
    <p v-if="show">Hello Vue!</p>
  </[1]>
</template>

Drag options to blanks, or click blank then click option'

Aanimate

Bdiv

Csection

Dtransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using a regular HTML tag like

instead of the component.

Misspelling the component name.

The transition component in Vue is used to apply enter and leave transitions to elements or components.

2fill in blank

medium

Complete the code to bind the transition's CSS class name.

Vue

<template>
  <transition name="[1]">
    <div v-if="visible">Content</div>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

Afade

Bslide

Cbounce

Dzoom

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that does not match any CSS classes.

Leaving the name attribute empty.

The name attribute sets the base CSS class for the transition. Here, fade is commonly used for fade-in and fade-out effects.

3fill in blank

hard

Fix the error in the transition event listener syntax.

Vue

<template>
  <transition @[1]="onEnter">
    <div v-if="show">Hello</div>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

Abefore-enter

Benter-active

Center

Dleave

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'enter' instead of 'before-enter'.

Using 'enter-active' which is a CSS class, not an event.

The correct event name for the hook before the enter transition starts is before-enter.

4fill in blank

hard

Fill both blanks to create a fade transition with correct CSS classes.

Vue

<style>
.[1]-enter-active, .[1]-leave-active {
  transition: opacity 0.5s;
}
.[2]-enter-from, .[2]-leave-to {
  opacity: 0;
}
</style>

Drag options to blanks, or click blank then click option'

Afade

Bslide

Czoom

Dbounce

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for enter and leave classes.

Using a name that does not match the transition component.

The CSS classes must match the transition name attribute, here 'fade', to apply the fade effect correctly.

5fill in blank

hard

Fill all three blanks to create a transition with a custom JavaScript hook.

Vue

<template>
  <transition
    @[1]="beforeEnter"
    @[2]="enter"
    @[3]="leave"
  >
    <div v-if="show">Content</div>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

Abefore-enter

Benter

Cleave

Dafter-leave

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or misspelled event names.

Mixing CSS class names with event names.

Vue transition events include before-enter, enter, and leave for hooking into different phases of the transition.

Practice

1. What is the main purpose of the <transition> component in Vue?

easy

A. To handle user input events

B. To add animations when elements enter or leave the DOM

C. To create reactive data properties

D. To fetch data from an API

Solution

1. Step 1: Understand the role of <transition>

   The <transition> component is designed to wrap elements and apply animations when they appear or disappear.

2. Step 2: Compare with other options

   Fetching data, creating reactive properties, and handling events are unrelated to <transition> functionality.

3. Final Answer:

   To add animations when elements enter or leave the DOM -> Option B

4. Quick Check:

   Enter and leave animations [OK]

Hint: Think: transition means animation on show/hide [OK]

Common Mistakes:

• Confusing transition with data fetching
• Thinking transition handles events
• Mixing transition with reactive data setup

2. Which of the following is the correct way to apply a CSS transition named "fade" to an element in Vue?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Check correct usage of <transition> with name

   The <transition> component requires a name attribute to link CSS classes, and the element to animate must be inside it with v-if or v-show.

2. Step 2: Validate each option

   <transition name="fade"><div v-if="show">Content</div></transition> correctly wraps the element inside <transition name="fade"> with v-if. Using transition as an attribute on div is invalid, placing v-if on <transition> does not work properly, and using class on div without name on <transition> misses the name attribute.

3. Final Answer:

   <transition name="fade"><div v-if="show">Content</div></transition> -> Option A

4. Quick Check:

   Use <transition name="fade"> wrapper [OK]

Hint: Always put v-if inside <transition name="..."> [OK]

Common Mistakes:

• Putting v-if on <transition> instead of child
• Missing the name attribute on <transition>
• Using transition attribute on div instead of component

3. Given this Vue template and CSS, what happens when show changes from false to true?

<template>
  <transition name="slide">
    <div v-if="show">Hello</div>
  </transition>
</template>

<style>
.slide-enter-active { transition: all 0.5s ease; }
.slide-enter-from { transform: translateX(-100%); opacity: 0; }
.slide-enter-to { transform: translateX(0); opacity: 1; }
</style>

medium

A. The div fades out when shown

B. The div instantly appears without animation

C. The div slides out to the right when shown

D. The div slides in from the left with fading effect

Solution

1. Step 1: Understand the transition classes

   The classes slide-enter-from and slide-enter-to define the start and end states for entering. The div starts translated left and transparent, then moves to normal position and full opacity.

2. Step 2: Analyze the effect when show changes true

   When show becomes true, the div enters with the slide-enter transition, sliding in from left and fading in.

3. Final Answer:

   The div slides in from the left with fading effect -> Option D

4. Quick Check:

   slide-enter-from to slide-enter-to = slide in + fade [OK]

Hint: Enter transitions use -enter-from to -enter-to classes [OK]

Common Mistakes:

• Confusing enter and leave animations
• Ignoring transform and opacity in CSS
• Assuming no animation on v-if change

4. Identify the error in this Vue transition code:

<transition name="fade">
  <div v-show="visible">Content</div>
</transition>

<style>
.fade-leave-active { transition: opacity 0.3s ease; }
.fade-leave-from { opacity: 1; }
.fade-leave-to { opacity: 0; }
</style>

medium

A. The transition name should be "fade-leave" instead of "fade"

B. Using v-show instead of v-if prevents leave transition from running

C. Missing fade-enter classes causes no enter animation

D. The CSS transition duration is too short to see

Solution

1. Step 1: Examine the provided CSS classes

   Only leave transition classes (.fade-leave-active, .fade-leave-from, .fade-leave-to) are defined. No enter classes (.fade-enter-active, .fade-enter-from, .fade-enter-to) are present.

2. Step 2: Determine the impact

   Missing enter classes (.fade-enter-*) means no animation occurs when the element enters (visible changes from false to true). The leave transition works fine with v-show.

3. Final Answer:

   Missing fade-enter classes causes no enter animation -> Option C

4. Quick Check:

   Missing enter classes = no enter animation [OK]

Hint: Define enter-active/from/to for enter animations [OK]

Common Mistakes:

• Thinking v-show prevents leave animations (it doesn't)
• Proposing to change transition name
• Focusing on duration instead of missing classes

5. You want to create a fade transition that only triggers when a list item is removed, not when added. Which approach correctly achieves this in Vue?

hard

A. Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes

B. Use <transition> with enter and leave classes but set v-show instead of v-if

C. Use <transition> with enter classes only and no leave classes

D. Use <transition> with both enter and leave classes and toggle v-if normally

Solution

1. Step 1: Understand transition class roles

   Enter classes control animation when element appears; leave classes control animation when element disappears.

2. Step 2: To animate only removal, define leave classes only

   By omitting enter classes, no animation runs on enter, but leave animations run on removal.

3. Final Answer:

   Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes -> Option A

4. Quick Check:

   Only leave classes = animate removal only [OK]

Hint: Omit enter classes to animate only leave transitions [OK]

Common Mistakes:

• Using v-show prevents leave animations
• Defining enter classes triggers animation on add
• Confusing enter and leave class roles