CSS transition classes in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Vue component uses with CSS classes?

Consider a Vue 3 component that wraps an element with a <transition> tag and uses CSS classes for enter and leave animations. What is the visible behavior when the element is toggled?

Vue

<template>
  <transition name="fade">
    <p v-if="show">Hello!</p>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

A The paragraph smoothly fades in and out by changing opacity when toggled.

B The paragraph slides in from the left when shown and slides out to the right when hidden.

C The paragraph instantly appears and disappears without any animation.

D The paragraph changes color but does not fade in or out.

💡 Hint

Look at the CSS classes and their effects on opacity and transition properties.

The <transition> component applies CSS classes during enter and leave phases. The classes fade-enter-active and fade-leave-active define a transition on opacity. The fade-enter-from and fade-leave-to classes set opacity to 0, and fade-enter-to and fade-leave-from set opacity to 1. This causes a smooth fade effect.

📝 Syntax

intermediate

Which CSS class name is correct for Vue transition enter active state?

Vue transition classes follow a naming pattern based on the transition name. If the transition name is slide, which CSS class targets the enter active state?

A .slide-entering-active

B .slide-enter-active

C .slide-enter-active-state

D .slide-enter-active-class

💡 Hint

Vue uses a fixed naming pattern for transition classes.

The correct class for the enter active state is name-enter-active. For a transition named slide, it is .slide-enter-active.

🔧 Debug

advanced

Why does the Vue transition not animate the element?

This Vue component uses a <transition> with CSS classes, but the element appears and disappears instantly without animation. What is the likely cause?

Vue

<template>
  <transition name="fade">
    <div v-if="visible">Content</div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

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

A The CSS classes use incorrect names; they should be 'fade-enter-from' and 'fade-leave-from' instead of 'fade-enter' and 'fade-leave'.

B The transition name 'fade' is not defined in the component's script.

C The 'v-if' directive is missing a key attribute on the element.

D The transition duration is too short to notice the animation.

💡 Hint

Check the official Vue 3 transition class naming conventions.

Vue 3 uses the classes fade-enter-from and fade-leave-from to define the starting states of the transition. Using fade-enter and fade-leave is from Vue 2 and will not trigger animations in Vue 3.

❓ state_output

advanced

What is the final opacity of the element after transition ends?

Given this Vue transition with CSS classes, what is the opacity of the element after the enter transition finishes?

Vue

<template>
  <transition name="fade">
    <span v-if="show">Text</span>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

A Opacity oscillates between 0 and 1 indefinitely.

B Opacity is 0 (fully transparent) after the enter transition ends.

C Opacity is 1 (fully visible) after the enter transition ends.

D Opacity remains at 0.5 after the transition ends.

💡 Hint

Look at the fade-enter-to class opacity value.

After the enter transition finishes, the element has the fade-enter-to class which sets opacity to 1, making it fully visible.

🧠 Conceptual

expert

Which Vue transition class controls the element's style during the leave phase start?

In Vue 3's CSS transition system, which class is applied to the element at the start of the leave phase to define its initial style?

A name-leave-start

B name-leave-active

C name-leave-to

D name-leave-from

💡 Hint

Think about the naming pattern for the leave phase start state.

The class name-leave-from is applied at the start of the leave phase to set the initial style before the transition runs.

Practice

1. What is the main purpose of using CSS transition classes in Vue's <transition> component?

easy

A. To smoothly animate elements when they enter or leave the DOM

B. To change the HTML structure of elements dynamically

C. To fetch data asynchronously before rendering

D. To validate user input in forms

Solution

1. Step 1: Understand the role of <transition> in Vue

   The <transition> component wraps elements to apply CSS classes during their entering and leaving phases.

2. Step 2: Identify the effect of CSS transition classes

   These classes create smooth animations, making elements appear or disappear gently instead of abruptly.

3. Final Answer:

   To smoothly animate elements when they enter or leave the DOM -> Option A

4. Quick Check:

   CSS transition classes = smooth animations [OK]

Hint: Think animation for element appearance/disappearance [OK]

Common Mistakes:

• Confusing transitions with data fetching
• Thinking transitions change HTML structure
• Mixing transitions with form validation

2. Which of the following is the correct CSS class name Vue applies when an element starts to enter using <transition>?

easy

A. v-enter

B. v-leave-active

C. v-enter-to

D. v-leave-to

Solution

1. Step 1: Recall Vue's transition class naming conventions

   When an element starts entering, Vue applies the v-enter class first.

2. Step 2: Differentiate from other classes

   v-enter-to is applied after v-enter, v-leave-active and v-leave-to relate to leaving transitions.

3. Final Answer:

   v-enter -> Option A

4. Quick Check:

   Start entering = v-enter [OK]

Hint: Enter start class always is v-enter [OK]

Common Mistakes:

• Confusing enter and leave class names
• Mixing 'to' and 'active' suffixes
• Using leave classes for entering elements

3. Given this Vue template snippet:

<transition name="fade">
  <div v-if="show">Hello</div>
</transition>

And these CSS classes:

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

What will happen when show changes from false to true?

medium

A. The div will appear instantly without animation

B. The div will remain hidden

C. The div will fade out instead of fading in

D. The div will fade in from transparent to fully visible over 0.5 seconds

Solution

1. Step 1: Understand the transition classes applied on enter

   When show becomes true, Vue applies fade-enter, fade-enter-active, and fade-enter-to classes in sequence.

2. Step 2: Analyze the CSS effect

   fade-enter sets opacity 0, fade-enter-to sets opacity 1, and fade-enter-active animates opacity over 0.5 seconds, causing a fade-in effect.

3. Final Answer:

   The div will fade in from transparent to fully visible over 0.5 seconds -> Option D

4. Quick Check:

   fade-enter classes = fade in animation [OK]

Hint: fade-enter sets start opacity 0, fade-enter-to sets opacity 1 [OK]

Common Mistakes:

• Assuming no animation occurs
• Confusing fade-in with fade-out
• Ignoring the transition duration

4. Consider this Vue transition usage:

<transition name="slide">
  <div v-if="visible">Content</div>
</transition>

With CSS:

.slide-enter-active { transition: transform 0.3s ease; }
.slide-enter { transform: translateX(-100%); }
.slide-enter-to { transform: translateX(0); }
.slide-leave { transform: translateX(0); }
.slide-leave-to { transform: translateX(100%); }

If the element does not slide out when visible changes from true to false, what is the likely cause?

medium

A. The slide-enter class is applied during leave

B. Incorrect v-if usage instead of v-show

C. Missing .slide-leave-active class with transition property

D. The transform property cannot be animated

Solution

1. Step 1: Check CSS classes for leave transition

   The leave transition requires slide-leave-active to define the transition property for smooth animation.

2. Step 2: Identify missing class causing no animation

   Since slide-leave-active is missing, the browser does not animate the transform property on leave, causing no slide-out effect.

3. Final Answer:

   Missing .slide-leave-active class with transition property -> Option C

4. Quick Check:

   Leave animation needs leave-active class [OK]

Hint: Leave transitions need leave-active class with transition [OK]

Common Mistakes:

• Thinking v-if vs v-show affects animation
• Believing transform cannot animate
• Confusing enter classes with leave classes

5. You want to create a fade transition in Vue that only triggers when a list item is removed, not when added. Which approach correctly uses CSS transition classes to achieve this?

hard

A. Use v-enter-active classes only and no leave classes

B. Define only v-leave-active, v-leave, and v-leave-to classes with opacity changes; omit enter classes

C. Define both enter and leave classes with opacity changes for fade effect

D. Use JavaScript hooks instead of CSS classes for leave transitions

Solution

1. Step 1: Understand the requirement

   The fade effect should happen only on removal (leave), not on addition (enter).

2. Step 2: Apply CSS classes selectively

   By defining only leave transition classes (v-leave-active, v-leave, v-leave-to) with opacity changes, the fade-out happens on removal. Omitting enter classes means no fade-in on addition.

3. Final Answer:

   Define only v-leave-active, v-leave, and v-leave-to classes with opacity changes; omit enter classes -> Option B

4. Quick Check:

   Fade only on leave = define leave classes only [OK]

Hint: Omit enter classes to disable fade-in [OK]

Common Mistakes:

• Defining enter classes causes fade-in on add
• Using JS hooks unnecessarily
• Confusing leave and enter class roles