<script setup>
import { animate } from "motion"

import { ref } from "vue"

const show = ref(true)

async function onEnter(el, onComplete) {
    console.log("onEnter")
    await animate(el, { opacity: 1 }, { duration: 0.3 })
    onComplete()
}

async function onLeave(el, onComplete) {
    await animate(el, { opacity: 0 }, { duration: 0.3 })
    onComplete()
}
</script>

<template>
    <div class="container">
        <div class="space">
            <Transition
                :css="false"
                appear
                @enter="onEnter"
                @appear="onEnter"
                @leave="onLeave"
            >
                <div class="box" v-if="show"></div>
            </Transition>
        </div>
        <button @click="show = !show">Toggle visibility</button>
    </div>
</template>

<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.container .space {
    width: 100px;
    height: 100px;
}

.container .box {
    background-color: #0cdcf7;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    opacity: 0;
}

.container button {
    background-color: #0cdcf7;
    color: #0f1115;
    border-radius: 5px;
    padding: 10px;
    white-space: nowrap;
}
</style>