am using vue3
am trying to add Transition to my dynamic modal but every atempt faild to work instead the modal just appear instantly without slide-up and slide-down, i have to remove the transaction completly my DynamicModal.vue

<template>
  <div v-for="(modal, index) in modalStore.modals" :key="index"
       :class="['offcanvas', 'offcanvas-bottom', { show: modal.isOpen }]"
       data-bs-backdrop="false" 
       tabindex="-1" aria-labelledby="offcanvasBottomLabel">
    <!-- Modal Header -->
    <div class="offcanvas-header" v-if="modal.props.title">
      <h5 class="offcanvas-title">{{ modal.props.title }}</h5>
    </div>
    
    <!-- Modal Body -->
    <div class="offcanvas-body p-0 m-0">
      <component :is="modal.component" v-bind="modal.props"></component>
    </div>
    
    <!-- Modal Footer (conditionally rendered) -->
    <div class="offcanvas-footer" v-if="modal.props.showFooter !== false">
      <div class="d-grid">
        <button type="button" class="modal-close-btn" @click="closeModal(modal.name)" aria-label="Close">
          <i class="fa-solid fa-chevron-down"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { useModalStore } from '../../../libs/store/modalStore';

export default {
  setup() {
    const modalStore = useModalStore();

    const closeModal = (name) => {
      modalStore.closeModal(name);
    };

    return {
      modalStore,
      closeModal
    };
  }
};
</script>

i try this but still did not work, it just pop out instantly without any transition, any help we do

<template>
  <transition
    name="slide-fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div v-for="(modal, index) in modalStore.modals" :key="index"
         :class="['offcanvas', 'offcanvas-bottom', { show: modal.isOpen }]"
         data-bs-backdrop="false"
         tabindex="-1" aria-labelledby="offcanvasBottomLabel"
         v-show="modal.isOpen">
      <!-- Modal Header -->
      <div class="offcanvas-header" v-if="modal.props.title">
        <h5 class="offcanvas-title">{{ modal.props.title }}</h5>
      </div>
      
      <!-- Modal Body -->
      <div class="offcanvas-body p-0 m-0">
        <component :is="modal.component" v-bind="modal.props"></component>
      </div>
      
      <!-- Modal Footer (conditionally rendered) -->
      <div class="offcanvas-footer" v-if="modal.props.showFooter !== false">
        <div class="d-grid">
          <button type="button" class="modal-close-btn" @click="closeModal(modal.name)" aria-label="Close">
            <i class="fa-solid fa-chevron-down"></i>
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { useModalStore } from '../../../libs/store/modalStore';

export default {
  setup() {
    const modalStore = useModalStore();

    const closeModal = (name) => {
      modalStore.closeModal(name);
    };

    const beforeEnter = (el) => {
      el.style.transform = 'translateY(100%)';
    };

    const enter = (el, done) => {
      el.offsetWidth; // trigger reflow
      el.style.transition = 'transform 0.3s ease-out';
      el.style.transform = 'translateY(0)';
      done();
    };

    const leave = (el, done) => {
      el.style.transition = 'transform 0.3s ease-in';
      el.style.transform = 'translateY(100%)';
      done();
    };

    return {
      modalStore,
      closeModal,
      beforeEnter,
      enter,
      leave
    };
  }
};
</script>