vue3 transition 中enter-from不生效的问题

Question

template

css

在控制isShow进行动画效果时，离开过渡的动画能展示，而进入过渡的动画却不会生效

<template>
  <transition name="fade">
    <div class="modal d-block" tabindex="-1" v-if="isShow">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ modalTitle }}</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
              @click.prevent="closeDialog"
            ></button>
          </div>
          <div class="modal-body">
            <slot name="body">
              <p>Modal body text goes here.</p>
            </slot>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
              @click.prevent="closeDialog"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script lang='ts'>
import { defineComponent, onMounted, ref, watch } from 'vue'
export default defineComponent({
  props: {
    modalTitle: {
      type: String,
      default: 'Modal title'
    }
  },
  setup () {
    const isShow = ref(false)
    const closeDialog = () => {
      isShow.value = false
    }
    // onMounted(() => {
    //   setTimeout(() => (isShow.value = true), 1000)
    // })
    return {
      closeDialog,
      isShow
    }
  }
})
</script>
<style lang='scss' scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
</style>

但是当我在onMounted生命周期函数中添加定时器，在一定时间间隔后去进行赋值，却可以实现进入过渡的效果，是transition和v-if之间存在先后顺序的问题吗？如果不通过定时器要如何实现呢？