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.