Transition component for animations 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'

Adiv

Banimate

Csection

Dtransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using a regular HTML tag like div instead of transition.

Misspelling the component name.

The <transition> component in Vue wraps elements to apply animations when they enter or leave the DOM.

2fill in blank

medium

Complete the code to bind the show state to the transition element.

Vue

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

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

Avisible

Bshow

Cdisplay

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name like visible or display.

Confusing with CSS properties.

The v-if directive uses the show data property to control visibility.

3fill in blank

hard

Fix the error in the CSS class for the enter transition.

Vue

<style>
.fade-enter-active {
  transition: opacity [1] ease;
}
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
</style>

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

A2s

Bease

Copacity

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a time value.

Omitting the time unit.

The transition duration should be a time value like 2s for 2 seconds.

4fill in blank

hard

Fill both blanks to create a fade-out transition with 1.5 seconds duration.

Vue

<style>
.fade-leave-active {
  transition: opacity [1] ease;
}
.fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: [2];
}
</style>

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

A1.5s

B0

C1

Dease-in

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong opacity values like 1 for fade-out.

Missing the time unit in duration.

The fade-out transition changes opacity from 1 to 0 over 1.5 seconds.

5fill in blank

hard

Fill all three blanks to create a JavaScript hook for the transition that logs when the element enters.

Vue

<script setup>
function beforeEnter(el) {
  console.log('[1]');
}

function enter(el, done) {
  el.style.opacity = '[2]';
  setTimeout(() => {
    el.style.opacity = '[3]';
    done();
  }, 300);
}
</script>

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

AElement is entering

B0

C1

DElement left

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the wrong message.

Reversing opacity values.

Forgetting to call done() after animation.

The beforeEnter hook logs a message. The enter hook sets opacity from 0 to 1 to fade in.