Dynamic transitions in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the transition name.

Vue

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

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

Azoom

Bslide

Cbounce

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the name attribute empty

Forgetting to wrap the transition around the element

The name attribute sets the base name for CSS transition classes. Here, fade is the transition name.

2fill in blank

medium

Complete the code to bind the transition name dynamically using Vue's binding syntax.

Vue

<template>
  <transition :name="[1]">
    <p v-if="show">Dynamic Transition</p>
  </transition>
</template>

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

AtransitionName

B"slide"

C'fade'

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name, making it a string literal

Binding to a non-existent variable

Use :name="transitionName" to bind the transition name dynamically from the component's data or computed property.

3fill in blank

hard

Fix the error in the transition binding to correctly use a dynamic transition name.

Vue

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

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

Av-bind:name="transitionName"

B:transitionName

C:name="transitionName"

DtransitionName

Attempts:

3 left

💡 Hint

Common Mistakes

Using interpolation inside the name attribute

Forgetting the colon for binding

To bind the transition name dynamically, use :name="transitionName" or v-bind:name="transitionName". The original code uses interpolation inside an attribute which is invalid.

4fill in blank

hard

Fill both blanks to create a dynamic transition with a button to toggle the transition name.

Vue

<template>
  <button @click="[1]">Toggle Transition</button>
  <transition :name="[2]">
    <p v-if="show">Toggle me!</p>
  </transition>
</template>

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

AtoggleTransition

BchangeName

CtransitionName

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name in the click event

Binding the transition name to a method instead of a data property

The button calls the toggleTransition method to change the transitionName data property, which is bound dynamically to the transition's name.

5fill in blank

hard

Fill all three blanks to create a dynamic transition with a button that toggles the transition name and the visibility of the element.

Vue

<template>
  <button @click="[1]">Toggle</button>
  <transition :name="[2]">
    <p v-if="[3]">Hello with dynamic transition!</p>
  </transition>
</template>

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

AtoggleAll

BtransitionName

Cshow

DtoggleTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Binding the wrong variable to v-if

Calling a non-existent method on button click

The button calls toggleTransition to switch the transition name and toggle show controls the visibility of the paragraph. The transition name is bound dynamically via transitionName.