Why transitions enhance UX in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a transition wrapper around the element.

Vue

<template>
  <[1] name="fade">
    <p>Hello, Vue!</p>
  </[1]>
</template>

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

Atransition

Bdiv

Csection

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using a regular HTML tag like div instead of transition.

Forgetting to close the transition tag properly.

The <transition> component in Vue wraps elements to apply transitions smoothly.

2fill in blank

medium

Complete the code to bind the transition's appear attribute.

Vue

<template>
  <transition name="fade" [1]>
    <p>Welcome!</p>
  </transition>
</template>

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

Aactive

Bshow

Center

Dappear

Attempts:

3 left

💡 Hint

Common Mistakes

Using attributes like show or enter which are not valid here.

Omitting the attribute when initial animation is needed.

The appear attribute makes the transition run when the component first appears.

3fill in blank

hard

Fix the error in the transition CSS class name for fade effect.

Vue

<style>
.fade-[1] {
  transition: opacity 0.5s ease;
  opacity: 1;
}
</style>

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

Aenter-active

Bactive

Center

Dleave-active

Attempts:

3 left

💡 Hint

Common Mistakes

Using leave-active for entering transition.

Using generic class names like active.

The correct class for the transition phase is enter-active to apply the fade effect when entering.

4fill in blank

hard

Fill both blanks to create a fade-out transition with opacity and duration.

Vue

<style>
.fade-[1] {
  opacity: 0;
  transition: opacity [2] ease;
}
</style>

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

Aleave-active

B0.3s

C0.5s

Denter-active

Attempts:

3 left

💡 Hint

Common Mistakes

Using enter-active instead of leave-active for fade-out.

Setting duration too short or too long.

The leave-active class controls the fade-out effect, and 0.5s sets the transition duration.

5fill in blank

hard

Fill all three blanks to create a fade transition with appear attribute and CSS classes.

Vue

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

<style>
.fade-[2] {
  opacity: 0;
  transition: opacity [3] ease;
}
</style>

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

Aappear

Bleave-active

C0.4s

Denter-active

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the appear attribute.

Mixing up enter and leave classes.

Using inconsistent transition durations.

Use appear to animate on mount, leave-active for fade-out class, and 0.4s for smooth transition duration.