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.

Practice

1. What does the :name attribute in Vue's <transition> component control?

easy

A. The CSS class name used for the transition animation

B. The HTML tag used for the transition wrapper

C. The JavaScript function called during transition

D. The duration of the transition in milliseconds

Solution

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

   The :name attribute sets the base CSS class name for the transition states like enter and leave.

2. Step 2: Connect :name to CSS animation classes

   Vue uses this name to apply classes such as {name}-enter-active and {name}-leave-active to trigger CSS animations.

3. Final Answer:

   The CSS class name used for the transition animation -> Option A

4. Quick Check:

   Transition :name = CSS class base name [OK]

Hint: Remember :name sets CSS classes for animations [OK]

Common Mistakes:

• Confusing :name with HTML tag or JS function
• Thinking :name controls timing instead of class names
• Assuming :name is optional for dynamic transitions

2. Which of the following is the correct syntax to bind a dynamic transition name in Vue?

easy

A. <transition v-bind:name>

B. <transition :name="fade">

C. <transition name="fade">

D. <transition :name="transitionName">

Solution

1. Step 1: Identify dynamic binding syntax in Vue

   Dynamic binding uses : or v-bind: with a JavaScript expression inside quotes.

2. Step 2: Check which option uses a variable for dynamic name

   <transition :name="transitionName"> uses :name="transitionName", correctly binding a variable named transitionName.

3. Final Answer:

   <transition :name="transitionName"> -> Option D

4. Quick Check:

   Dynamic binding = :name="variable" [OK]

Hint: Use :name="variable" for dynamic transition names [OK]

Common Mistakes:

• Using static string without binding for dynamic names
• Missing quotes around variable name
• Using :name without a value

3. Given this Vue template snippet:

<template>
  <transition :name="animation">
    <div v-if="show">Hello</div>
  </transition>
</template>

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

What happens if you change animation.value from 'fade' to 'slide' while show is true?

medium

A. The div will animate with the 'slide' transition on next toggle

B. The div immediately animates with the 'slide' transition without toggling

C. No animation occurs until show changes

D. Vue throws an error because transition name changed dynamically

Solution

1. Step 1: Understand when transitions trigger

   Transitions animate when elements enter or leave the DOM, triggered by v-if changes.

2. Step 2: Changing transition name while element is visible

   Changing animation.value alone does not trigger enter/leave, so no animation runs immediately.

3. Final Answer:

   No animation occurs until show changes -> Option C

4. Quick Check:

   Transition triggers on DOM changes, not name changes [OK]

Hint: Transitions run on element enter/leave, not on name change alone [OK]

Common Mistakes:

• Thinking transition changes animate immediately
• Assuming Vue errors on dynamic name changes
• Confusing v-if toggling with reactive variable changes

4. Consider this Vue code snippet:

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

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

// Later in code
currentTransition = 'slide'
</script>

What is the main problem in this code?

medium

A. Directly assigning a new string to a ref variable instead of using .value

B. Using v-if inside <transition> is not allowed

C. Transition names cannot be changed dynamically

D. Missing quotes around transition names

Solution

1. Step 1: Identify how to update Vue refs

   Refs are reactive objects; to update their value, use .value, not direct assignment.

2. Step 2: Spot incorrect assignment

   The code does currentTransition = 'slide' which replaces the ref instead of updating its value.

3. Final Answer:

   Directly assigning a new string to a ref variable instead of using .value -> Option A

4. Quick Check:

   Update ref with .value, not direct assignment [OK]

Hint: Update ref variables with .value, not direct assignment [OK]

Common Mistakes:

• Assigning new value directly to ref variable
• Thinking v-if cannot be used inside transition
• Believing transition names are static only

5. You want to create a Vue component that switches between 'fade' and 'slide' transitions dynamically based on a button click. Which approach correctly updates the transition and triggers the animation each time the button toggles visibility?

hard

A. Change the transition name ref only without toggling visibility

B. Use a ref for transition name and toggle show to trigger enter/leave animations

C. Use a computed property for transition name but keep show always true

D. Apply both transitions simultaneously by listing names in :name

Solution

1. Step 1: Understand how transitions trigger in Vue

   Transitions animate when elements enter or leave the DOM, controlled by v-if or similar directives.

2. Step 2: Combine dynamic transition name with toggling visibility

   Changing the transition name alone won't animate; toggling show triggers the animation with the current transition name.

3. Step 3: Confirm correct approach

   Using a ref for transition name and toggling show ensures the element animates with the chosen transition each toggle.

4. Final Answer:

   Use a ref for transition name and toggle show to trigger enter/leave animations -> Option B

5. Quick Check:

   Toggle visibility + dynamic name = dynamic transitions [OK]

Hint: Toggle element visibility to trigger dynamic transitions [OK]

Common Mistakes:

• Changing transition name without toggling visibility
• Trying to apply multiple transitions at once
• Keeping element always visible expecting animation