JavaScript hooks for transitions in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the @before-enter hook returns a Promise?

In Vue 3 transitions, if the @before-enter hook returns a Promise, how does Vue handle the transition?

Vue

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div v-if="show">Hello</div>
  </transition>
</template>

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

function beforeEnter(el) {
  return new Promise(resolve => {
    setTimeout(() => {
      el.style.opacity = '0'
      resolve()
    }, 100)
  })
}

function enter(el, done) {
  el.style.transition = 'opacity 0.5s'
  el.style.opacity = '1'
  setTimeout(done, 500)
}

function leave(el, done) {
  el.style.transition = 'opacity 0.5s'
  el.style.opacity = '0'
  setTimeout(done, 500)
}
</script>

A Vue throws a runtime error because hooks cannot return Promises.

B Vue ignores the Promise and starts the enter transition immediately.

C Vue runs the enter transition in parallel with the Promise.

D Vue waits for the Promise to resolve before starting the enter transition.

💡 Hint

Think about how Vue manages asynchronous hooks to control timing.

Vue waits for the Promise returned by @before-enter to resolve before starting the enter transition. This allows asynchronous setup before the animation begins.

📝 Syntax

intermediate

Which option correctly defines a @enter hook with a done callback?

Select the correct syntax for an @enter hook that uses the done callback to signal transition end.

A function enter(done, el) { el.style.opacity = '1'; done(); }

B function enter(el) { el.style.opacity = '1'; }

C function enter(el, done) { el.style.opacity = '1'; done(); }

D function enter(el, done) { el.style.opacity = '1'; return done; }

💡 Hint

The done callback is the second argument and must be called to finish the transition.

The @enter hook receives the element as the first argument and the done callback as the second. Calling done() signals the end of the transition.

🔧 Debug

advanced

Why does the leave transition never finish in this code?

Given the following leave hook, why does the transition never complete?

Vue

<template>
  <transition @leave="leave">
    <div v-if="show">Bye</div>
  </transition>
</template>

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

function leave(el, done) {
  el.style.transition = 'opacity 1s'
  el.style.opacity = '0'
  // done() is never called
}
</script>

A The done callback is never called, so Vue waits indefinitely for transition end.

B The opacity style is set incorrectly, so the transition does not start.

C The <code>v-if</code> directive prevents the leave hook from running.

D Vue requires the leave hook to return a Promise to finish.

💡 Hint

Check if the done callback is called to signal transition completion.

Vue waits for the done() callback to be called to know when the leave transition finishes. If it is never called, Vue waits forever.

🧠 Conceptual

advanced

What is the purpose of the @after-leave hook in Vue transitions?

Choose the best description of what the @after-leave hook does.

A It runs only if the leave transition is cancelled.

B It runs after the leave transition finishes and the element is removed from the DOM.

C It runs during the leave transition to update styles dynamically.

D It runs before the leave transition starts to prepare the element.

💡 Hint

Think about when cleanup or final actions happen after an element disappears.

The @after-leave hook runs after the leave transition completes and the element is removed from the DOM. It is useful for cleanup.

❓ state_output

expert

What is the final opacity of the element after this enter transition completes?

Given this enter hook, what will be the element's opacity after the transition ends?

Vue

<template>
  <transition @enter="enter">
    <div v-if="show">Fade In</div>
  </transition>
</template>

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

function enter(el, done) {
  el.style.opacity = '0'
  el.style.transition = 'opacity 0.3s ease-in'
  requestAnimationFrame(() => {
    el.style.opacity = '1'
  })
  setTimeout(() => {
    done()
  }, 300)
}
</script>

A 1

B undefined (opacity style removed)

C 0

D 0.5

💡 Hint

Consider how CSS transitions change opacity from 0 to 1 over 0.3 seconds.

The element starts with opacity 0, then transitions to opacity 1 over 0.3 seconds. After the transition, opacity remains 1.