Simple Nuxt 3 Page Transition not working

I'm discovering Nuxt 3 and and simply want to make an animation between pages. The idea is to use javascript hooks to make page transitions using js library such as gsap or animeJs.

So in my app.vue file, I simply put <NuxtPage/> into <Transition> element like this :

<NuxtLayout>
    <Transition>
        <NuxtPage/>
    </Transition>
</NuxtLayout>

My vue pages ('./pages/index.vue' and './pages/project/myproject.vue') look like this :

<template>
    <div>
        <h1>My Project</h1>
    </div>
</template>

<script setup>
function onEnter(el, done) {
    done()
}
function onLeave(el, done) {
    done()
}
</script>

I have followed both Nuxt 3 and Vue 3 documentations :

https://v3.nuxtjs.org/guide/directory-structure/pages#layouttransition-and-pagetransition

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

I also read this thread on github, but I can't find answer : https://github.com/nuxt/framework/discussions/851

When i was using Nuxt 2 I only need to put transition object into my page like this and it's working fine :

<script>
export default {
    // ... (datas, methods)
    transition: {
        mode: "in-out",
        css: false,
        enter(el, done) {
            console.log("enter");
            done()
        },
        leave(el, done) {
            console.log("leave");
            done()
        }
    }
}
</script>
<template>
    <div>
        <h1 class="text-center text-5xl">Hello World</h1>
    </div>
</template>

Do you have any idea how to achieve it ?