Modal transition not working

@lbecket I did this. but the same thing. During the Leave nothing

@d3v I'm a little confused by what you're trying to achieve with the use of zoomIn. I would expect that you can just toggle the value of show and allow the transition classes to take care of the rest.

Regardless, Laracasts explains how to do all of this, transitions included, in these two episodes: https://laracasts.com/series/learn-vue-3-step-by-step/episodes/28 https://laracasts.com/series/learn-vue-3-step-by-step/episodes/29

@lbecket Don't care about zoomIn it for modal when user click outside the modal it will zoom in and zoom out the modal. I have already viewed this video. but nothing changes. I have almost exactly the same code.

My modal component :

<script setup>
import { ref } from 'vue'

defineProps({
    show: Boolean,
})

const zoomIn = ref(false)

const zoomOutModal = () => {
    zoomIn.value = true
    setTimeout(() => {
        zoomIn.value = false
    }, 300)
}
</script>
<template>
    <div
        v-if="show"
        class="fixed top-0 left-0 w-full h-full flex items-center justify-center z-20"
    >
        <div
            class="fixed inset-0 bg-gray-600 bg-opacity-60"
            @click="zoomOutModal"
        ></div>
        <Transition name="slide-fade" appear>
            <div
                class="max-w-lg bg-[#151f32] w-full p-5 rounded-lg shadow-lg z-30"
                :class="{
                    'transition-all scale-105 ease-linear duration-700': zoomIn,
                }"
            >
                <h2 class="text-lg font-medium mb-3 text-center">
                    <slot>Titre du modal</slot>
                </h2>
                <slot name="content"></slot>
            </div>
        </Transition>
    </div>
</template>

<style lang="scss">
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.3s ease-out;
}

.slide-fade-enter-from {
    transform: translateY(100vh);
    opacity: 0;
}

.slide-fade-leave-to {
    transform: translateY(0vh);
    opacity: 0;
}

.slide-fade-leave-active {
    transition: all 0.9s ease-out;
}
</style>

@lbecket My Index.vue file

<template>
    <Button @click="showModal = true">Open Modal</Buttons>
    <Modal :show="showModal">
            Add Type
            <template v-slot:content>
                <form
                    @keydown.enter="sumitAddType"
                    @submit.prevent="sumitAddType"
                >
                    <input
                        class="px-3 py-2 bg-dark-item-bg text-white border-transparent rounded-xl w-full placeholder-gray focus:focus:ring-blue/30"
                        :class="{ 'border-red': errors.name }"
                        type="text"
                        placeholder="Tapez le text le nom"
                        v-model="modalForm.name"
                    />
                    <div
                        v-if="errors"
                        class="mt-2 text-red text-xs"
                        v-text="errors.name"
                    ></div>
                    <div class="flex gap-4 mt-5">
                        <CancelButtons
                            @click="
                                ;(showModal = false), (errors = {})
                            "
                            >Annuler</CancelButtons
                        >
                        <Buttons :disabled="modalForm.processing">
                            <div v-if="modalForm.processing">
                                <Spinner />
                            </div>
                            <div v-else>Ajouter</div>
                        </Buttons>
                    </div>
                </form>
            </template>
        </Modal>
    </template>
    <script setup>
    
    let showModal = ref(false)
    
    </script>