Dynamic transitions in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the transition name changes dynamically?

Consider a Vue 3 component that toggles between two transition names based on a button click. What will be the visible effect on the element's animation when the transition name changes?

Vue

<template>
  <button @click="toggle">Toggle Transition</button>
  <transition :name="transitionName">
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const transitionName = ref('fade')
function toggle() {
  show.value = !show.value
  transitionName.value = transitionName.value === 'fade' ? 'slide' : 'fade'
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}
</style>

A The element will not animate at all because dynamic transition names are not supported in Vue.

B The element will always use the initial transition name and ignore changes to the transitionName variable.

C The element will animate with the current transition name each time it appears or disappears, switching between fade and slide animations.

D The element will animate with both fade and slide transitions simultaneously, causing a mixed effect.

💡 Hint

Think about how Vue applies transition classes based on the name attribute binding.

Vue applies transition classes dynamically based on the current value of the name prop. Changing the transition name causes Vue to apply different CSS classes for enter and leave animations, so the element animates with the new transition style each time it appears or disappears.

📝 Syntax

intermediate

Which option correctly binds a dynamic transition name in Vue 3?

Given a Vue 3 template, which syntax correctly binds a dynamic transition name stored in a variable currentTransition?

Vue

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

A :name="currentTransition"

B name="{{ currentTransition }}"

C v-bind:name="currentTransition"

D name="currentTransition"

💡 Hint

Remember how to bind props dynamically in Vue templates.

In Vue templates, dynamic attribute binding uses the : shorthand (C) or full v-bind:name="currentTransition" (B). Option A incorrectly uses text interpolation {{}} for an attribute, and D binds the literal string "currentTransition".

🔧 Debug

advanced

Why does the transition not animate when toggling visibility?

Given this Vue 3 component, the element appears and disappears instantly without animation. What is the cause?

Vue

<template>
  <transition name="fade">
    <p v-show="visible">Fade me</p>
  </transition>
  <button @click="visible = !visible">Toggle</button>
</template>

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

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

A The transition name 'fade' is not defined in the CSS, so no animation occurs.

B The button click does not update the visible variable correctly, so no animation triggers.

C Using v-show instead of v-if prevents the transition from triggering enter and leave animations.

D The transition component must wrap a single root element, but <p> is not allowed.

💡 Hint

Check how refs are updated from template event handlers in Vue 3 <script setup>.

In Vue 3 <script setup>, you cannot mutate a ref directly in a template expression like @click="visible = !visible" because the left-hand visible does not refer to visible.value. The ref.value never changes, so visibility does not toggle and no transition triggers. Fix by defining const toggle = () => { visible.value = !visible.value } and using @click="toggle".

❓ state_output

advanced

What is the final class list on the element after transition enter finishes?

In Vue 3, when a transition with name 'slide' finishes entering, which classes remain on the element?

Vue

<style>
.slide-enter-active { transition: transform 0.3s; }
.slide-enter-from { transform: translateX(-100%); }
.slide-enter-to { transform: translateX(0); }
</style>

<template>
  <transition name="slide">
    <div v-if="show">Slide me</div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const show = ref(false)
onMounted(() => { show.value = true })
</script>

A No transition classes remain after enter finishes

B slide-enter-active and slide-enter-to

C slide-enter-from only

D slide-enter-active only

💡 Hint

Recall the sequence of classes Vue applies during enter transitions.

During enter: Vue adds slide-enter-active and slide-enter-from, then replaces slide-enter-from with slide-enter-to. When the transition finishes (transitionend event), Vue removes slide-enter-active and slide-enter-to, leaving no transition classes.

🧠 Conceptual

expert

How does Vue 3 handle dynamic transition components with multiple nested transitions?

In a Vue 3 app, you have nested <transition> components with dynamic names that change based on user interaction. What is the key behavior Vue uses to manage these nested dynamic transitions correctly?

A Vue requires manual event listeners to synchronize nested transitions when using dynamic names.

B Vue merges all nested transitions into a single transition using the outermost transition name, ignoring inner dynamic names.

C Vue only applies transitions to the outermost component and disables inner nested transitions to avoid conflicts.

D Vue tracks each transition instance separately and applies the correct CSS classes based on the current dynamic name for each nested transition.

💡 Hint

Think about how Vue manages multiple transition components in the virtual DOM.

Vue treats each <transition> component as an independent instance. It applies CSS classes based on each transition's current name prop, even if nested. This allows nested dynamic transitions to work correctly and independently.