Nuxt 3 onLeave transition hook not working

Question

Since I've been experimenting with Nuxt3 and animation libraries, I came across an issue for which I need help finding a solution for.

I want to do an easy transition with some Javascript hooks no CSS/basic transitions. When a page loads (onEnter), I want to reduce the height of a fixed black rectangle but for example sake, I'm just going to use the Nuxt example:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

Everything working fine till you want to add an onBeforeLeave, onLeave or onAfterLeave hook.:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',

    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {},


    //nothings is logging underneath this

    onBeforeLeave: (el) => {},
    onLeave: (el, done) => {
      console.log('this is not logging to the console...')
    },
    onAfterLeave: (el) => {}
  }
})
</script>

Someone who experienced the same issue?

Answer 1

It is because you need to call the done() function for the hook to move forward. Fortunately, Vue official documentation is more explicit about it:

https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

export default {
 // ...
 methods: {
   // called before the element is inserted into the DOM.
   // use this to set the "enter-from" state of the element
   onBeforeEnter(el) {},

   // called one frame after the element is inserted.
   // use this to start the animation.
   onEnter(el, done) {
     // call the done callback to indicate transition end
     // optional if used in combination with CSS
     done()
   },

   // called when the enter transition has finished.
   onAfterEnter(el) {},
   onEnterCancelled(el) {},

   // called before the leave hook.
   // Most of the time, you should just use the leave hook.
   onBeforeLeave(el) {},

   // called when the leave transition starts.
   // use this to start the leaving animation.
   onLeave(el, done) {
     // call the done callback to indicate transition end
     // optional if used in combination with CSS
     done()
   },

   // called when the leave transition has finished and the
   // element has been removed from the DOM.
   onAfterLeave(el) {},

   // only available with v-show transitions
   onLeaveCancelled(el) {}
 }
}