JavaScript hooks for transitions in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a JavaScript hook for the enter transition in Vue.

Vue

<template>
  <transition @before-enter="[1]">
    <div v-if="show">Hello</div>
  </transition>
</template>

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

AstartEnter

BenterHook

ConEnter

DbeforeEnterHook

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect hook names like 'enterHook' which don't match the event.

Forgetting to bind the hook method in the component.

The @before-enter event expects a method name like beforeEnterHook to run before the enter transition starts.

2fill in blank

medium

Complete the code to define the JavaScript hook method for the leave transition.

Vue

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

function [1](el, done) {
  el.style.opacity = 0
  setTimeout(() => {
    done()
  }, 300)
}
</script>

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

Aleave

BleaveHook

CbeforeLeave

DonLeave

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'leaveHook' which is not a recognized Vue hook name.

Not calling the done callback to finish the transition.

The leave hook is called when the leave transition starts. It receives the element and a done callback.

3fill in blank

hard

Fix the error in the transition hook usage by completing the code.

Vue

<template>
  <transition @[1]="fadeOut">
    <p v-if="visible">Goodbye</p>
  </transition>
</template>

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

Aleave

Bleave-start

Cbefore-leave

Dafter-leave

Attempts:

3 left

💡 Hint

Common Mistakes

Using dash-separated event names like 'leave-start' which are invalid.

Confusing lifecycle hooks with transition events.

The correct event for the leave transition hook is @leave. Other options are invalid event names.

4fill in blank

hard

Fill both blanks to correctly use JavaScript hooks for enter and leave transitions.

Vue

<template>
  <transition @[1]="onEnter" @[2]="onLeave">
    <div v-if="active">Content</div>
  </transition>
</template>

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

Aenter

Bleave

CbeforeEnter

DafterLeave

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing lifecycle hooks with transition event names.

Using 'beforeEnter' or 'afterLeave' which are not event names.

The @enter and @leave events trigger the JavaScript hooks for entering and leaving transitions.

5fill in blank

hard

Fill all three blanks to create a transition with JavaScript hooks for before-enter, enter, and after-leave.

Vue

<template>
  <transition
    @[1]="beforeEnter"
    @[2]="enter"
    @[3]="afterLeave"
  >
    <span v-if="show">Hi!</span>
  </transition>
</template>

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

Abefore-enter

Benter

Cafter-leave

Dleave

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase event names in the template which won't work.

Confusing 'leave' with 'after-leave' event names.

Vue transition events use kebab-case names like before-enter, enter, and after-leave for JavaScript hooks.