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.