Transition component basics 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>Hello Vue!</p>
  </[1]>
</template>

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

Asection

Bdiv

Ctransition

Danimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using a regular HTML tag like div instead of transition.

Misspelling the component name.

The <transition> component is used to apply transition effects to elements in Vue.

2fill in blank

medium

Complete the code to add a CSS class prefix for the transition.

Vue

<template>
  <transition name="[1]">
    <div v-if="show">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 CSS class prefix for the transition states. fade is a common choice.

3fill in blank

hard

Fix the error in the transition usage by completing the blank.

Vue

<template>
  <transition [1]="fade">
    <div v-if="visible">Hello</div>
  </transition>
</template>

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

Aname

Bclass

Cid

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of name.

Using an invalid attribute like id.

The correct attribute to specify the transition class prefix is name.

4fill in blank

hard

Fill both blanks to create a transition with a custom CSS class prefix and a appear attribute.

Vue

<template>
  <transition [1]="slide" [2]>
    <div v-if="show">Slide in content</div>
  </transition>
</template>

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

Aname

Bappear

Cmode

Dtag

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing mode or tag with appear.

Forgetting to add the appear attribute.

The name attribute sets the CSS class prefix, and appear enables the transition on initial render.

5fill in blank

hard

Fill all three blanks to create a transition with a fade effect, appear on mount, and mode set to 'out-in'.

Vue

<template>
  <transition [1]="fade" [2] [3]="out-in">
    <div v-if="visible">Fade content</div>
  </transition>
</template>

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

Aname

Bappear

Cmode

Dtag

Attempts:

3 left

💡 Hint

Common Mistakes

Using tag instead of mode.

Omitting the appear attribute.

name sets the CSS class prefix, appear enables animation on mount, and mode controls the transition sequence.