SlideTransition.vue

<template>
  <div
    v-if="exist || show"
    class="grid ease-out transition-[grid-template-rows] duration-500"
    :class="{
      'grid-rows-[1fr]': deferredShow,
      'grid-rows-[0fr]': !deferredShow,
    }"
    @transitionend="exist = show"
  >
    <div class="overflow-hidden" :class="childClass">
      <slot />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  childClass: {
    type: [Array, Object, String],
    default: null,
  },
});

const exist = ref(props.show);
const deferredShow = ref(props.show);

watch(
  () => props.show,
  (newVal) => {
    if (newVal === true) {
      setTimeout(() => {
        deferredShow.value = true;
      }, 20);
    } else {
      deferredShow.value = false;

      // fallback if for some reason transitionend event is not triggered
      setTimeout(() => {
        exist.value = false;
      }, 800);
    }
  },
);
</script>