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.

Practice

1. What is the main purpose of the <Transition> component in Vue?

easy

A. To add animations when elements enter or leave the page

B. To fetch data from an API

C. To manage application state globally

D. To create reusable UI components

Solution

1. Step 1: Understand the role of <Transition>

   The <Transition> component is designed to wrap elements and add animations when they appear or disappear.

2. Step 2: Compare with other options

   Fetching data, managing state, and creating components are unrelated to animation transitions.

3. Final Answer:

   To add animations when elements enter or leave the page -> Option A

4. Quick Check:

   Transition component = animations on enter/leave [OK]

Hint: Think: Transition means smooth entering or leaving [OK]

Common Mistakes:

• Confusing Transition with data fetching
• Thinking it manages state
• Assuming it creates components

2. Which of the following is the correct way to use the <Transition> component with a CSS class name 'fade'?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall the correct attribute for naming transition classes

   The name attribute sets the base CSS class for transition states.

2. Step 2: Check the options

   Only
   Content
   uses name="fade", which is correct. Others use invalid attributes like class, animation, or effect.

3. Final Answer:

   <Transition name="fade"><div v-if="show">Content</div></Transition> -> Option C

4. Quick Check:

   Use name="fade" for CSS classes [OK]

Hint: Use 'name' attribute to link CSS classes [OK]

Common Mistakes:

• Using 'class' instead of 'name'
• Using non-existent attributes like 'animation'
• Forgetting to wrap the element inside <Transition>

3. Given the following Vue template code, what will happen when show changes from false to true?

<Transition name="slide">
  <div v-if="show">Hello</div>
</Transition>

medium

A. The div will appear instantly without any animation

B. The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation

C. The div will not appear because Transition blocks rendering

D. The div will appear but with fade animation instead of slide

Solution

1. Step 1: Understand v-if with Transition

   When show becomes true, the div is inserted and Transition applies CSS classes based on the 'slide' name.

2. Step 2: Identify the animation classes

   The classes like slide-enter-from and slide-enter-active are added to animate the div's entrance.

3. Final Answer:

   The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation -> Option B

4. Quick Check:

   v-if true + Transition name = enter animation [OK]

Hint: v-if true triggers enter animation classes [OK]

Common Mistakes:

• Thinking Transition blocks rendering
• Assuming no animation on enter
• Confusing slide with fade animation

4. Identify the error in this Vue template using <Transition>:

<Transition name="fade">
  <div v-show="visible">Content</div>
</Transition>

medium

A. Using v-show instead of v-if prevents proper enter/leave animations

B. Missing closing tag for Transition

C. The name attribute should be 'fade-transition' not 'fade'

D. Transition cannot wrap a div element

Solution

1. Step 1: Understand difference between v-if and v-show with Transition

   Transition works best with v-if because it controls element insertion/removal, triggering enter/leave animations.

2. Step 2: Analyze the code

   Using v-show only toggles visibility via CSS, so Transition cannot detect element entering or leaving, preventing animations.

3. Final Answer:

   Using v-show instead of v-if prevents proper enter/leave animations -> Option A

4. Quick Check:

   Use v-if for Transition animations [OK]

Hint: Use v-if, not v-show, for enter/leave animations [OK]

Common Mistakes:

• Thinking v-show triggers enter/leave animations
• Believing name attribute must be longer
• Assuming Transition can't wrap div

5. You want to create a fade animation using <Transition> with these CSS classes:

.fade-enter-active { transition: opacity 0.5s; }
.fade-enter-from { opacity: 0; }
.fade-enter-to { opacity: 1; }
.fade-leave-active { transition: opacity 0.5s; }
.fade-leave-from { opacity: 1; }
.fade-leave-to { opacity: 0; }

Which Vue template correctly applies this animation to a paragraph that toggles with showText?

hard

A.
Hello World

B.
Hello World

C.
Hello World

D.
Hello World

Solution

1. Step 1: Match CSS classes with Transition usage

   The CSS classes use the base name 'fade', so the Transition component must have name="fade".

2. Step 2: Use v-if to toggle element presence

   v-if toggles the element in the DOM, triggering enter and leave animations. v-show only toggles visibility and won't trigger these animations.

3. Step 3: Check options

   Hello World

   uses name="fade" and v-if, which is correct.

   Hello World

   uses v-show, which won't animate properly.

   Hello World

   uses an invalid attribute 'animation'.

   Hello World

   shows the paragraph when showText is false, which is opposite of expected.

4. Final Answer:

   <Transition name="fade"> <p v-if="showText">Hello World</p> </Transition> -> Option D

5. Quick Check:

   Use name="fade" + v-if for fade animation [OK]

Hint: Use v-if with name="fade" for fade animations [OK]

Common Mistakes:

• Using v-show instead of v-if
• Using wrong attribute like animation
• Showing element when condition is false