Laravel + IntertiaJS = Global Transition with Page

Viewed 10

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

0 Answers
Related