How to make transitions with VueJS between pages (component)? I use InteriaJS.
Here is an example of a page layout:
<script setup>
import {gsap} from "gsap";
const anim_leave = (el, done) => {
console.log("leave");
return gsap.to(el, {opacity:0,y:"-=30px", duration:5,oncomplete:done})
}
const anim_enter = (el, done) => {
console.log("enter");
return gsap.to(el, {opacity:1, y:0, duration:.4,ease:"back.out", delay:.3,oncomplete:done})
}
const anim_before_enter = (el) => {
gsap.set(el, {opacity:0, y:"+=30px"})
}
</script>
<template>
<div class="container-fluid vh-100 d-flex justify-content-center align-items-center">
<Transition
appear
@before-enter="anim_before_enter"
@enter="anim_enter"
@leave="anim_leave"
:css="false">
<div :key="$page.url">
<slot />
</div>
</Transition>
</div>
</template>
anim_before_enter and anim_enter functions are called but never the anim_leave function.
Do you have some ideas to help me out and to make nice transitions between the different pages of Inertia ?
PS : I use Laravel 9