Dynamic transitions in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the transition name.

Vue

<template>
  <transition name="[1]">
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

Azoom

Bslide

Cbounce

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the name attribute empty

Forgetting to wrap the transition around the element

The name attribute sets the base name for CSS transition classes. Here, fade is the transition name.

2fill in blank

medium

Complete the code to bind the transition name dynamically using Vue's binding syntax.

Vue

<template>
  <transition :name="[1]">
    <p v-if="show">Dynamic Transition</p>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

AtransitionName

B"slide"

C'fade'

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name, making it a string literal

Binding to a non-existent variable

Use :name="transitionName" to bind the transition name dynamically from the component's data or computed property.

3fill in blank

hard

Fix the error in the transition binding to correctly use a dynamic transition name.

Vue

<template>
  <transition [1]>
    <p v-if="show">Oops!</p>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

Av-bind:name="transitionName"

B:transitionName

C:name="transitionName"

DtransitionName

Attempts:

3 left

💡 Hint

Common Mistakes

Using interpolation inside the name attribute

Forgetting the colon for binding

To bind the transition name dynamically, use :name="transitionName" or v-bind:name="transitionName". The original code uses interpolation inside an attribute which is invalid.

4fill in blank

hard

Fill both blanks to create a dynamic transition with a button to toggle the transition name.

Vue

<template>
  <button @click="[1]">Toggle Transition</button>
  <transition :name="[2]">
    <p v-if="show">Toggle me!</p>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

AtoggleTransition

BchangeName

CtransitionName

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name in the click event

Binding the transition name to a method instead of a data property

The button calls the toggleTransition method to change the transitionName data property, which is bound dynamically to the transition's name.

5fill in blank

hard

Fill all three blanks to create a dynamic transition with a button that toggles the transition name and the visibility of the element.

Vue

<template>
  <button @click="[1]">Toggle</button>
  <transition :name="[2]">
    <p v-if="[3]">Hello with dynamic transition!</p>
  </transition>
</template>

Drag options to blanks, or click blank then click option'

AtoggleAll

BtransitionName

Cshow

DtoggleTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Binding the wrong variable to v-if

Calling a non-existent method on button click

The button calls toggleTransition to switch the transition name and toggle show controls the visibility of the paragraph. The transition name is bound dynamically via transitionName.

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