我有一个全局confirmModal.vue，看起来像这样：

<template>
  <Transition
    appear
    enter-from-class="opacity-0"
    enter-to-class="opacity-100"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <div
      @click="$emit('cancel')"
      class="bg-black/50 z-50 fixed inset-0 flex justify-center items-center transition duration-300 ease-in-out p-8 cursor-pointer"
    >
      <Transition appear enter-from-class="scale-50" enter-to-class="scale-100">
        <div
          @click.stop
          class="flex flex-col gap-4 shadow-2xl p-8 rounded min-w-[300px] max-w-[480px] bg-lf-white transition duration-300 ease-in-out cursor-auto"
        >
          <h3 class="font-medium text-2xl">{{ title }}</h3>
          <p>{{ text }}</p>

          <div class="flex justify-end gap-2">
            <Button @click="$emit('cancel')" variant="white">Annuler</Button>
            <Button @click="$emit('confirm')">Supprimer</Button>
          </div>
        </div>
      </Transition>
    </div>
  </Transition>
</template>

第一个过渡为背景添加淡入效果，而嵌套过渡为模态本身添加平滑的幻影效果。
它工作得很好，但我不明白的是，当我关闭模态时，转换的leave部分根本不会触发。
这就是调用这个modal的组件的样子：

<ConfirmModal
  v-if="showConfirmModal"
  title="Suppression"
  text="Êtes-vous sûr de vouloir supprimer cet article ?"
  @cancel="handleHideConfirmModal"
  @confirm="handleConfirmAction"
/>

下面是它当前的GIF：

编辑：我通过将ConfirmModal.vue Package 成父组件中的Transition，实现了想要的结果，如下所示：

<Transition
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <ConfirmModal
        v-if="showConfirmModal"
        title="Suppression"
        text="Êtes-vous sûr de vouloir supprimer cet article ?"
        @cancel="handleHideConfirmModal"
      />
    </Transition>

我不明白为什么我必须这样做，为什么在this exemple中，人员不需要这样做，虽然他们从子组件内部使用Transition，过渡工作正常
它也不是理想的，因为每次我使用这个组件时，我都必须考虑将它 Package 在这个过渡中，以便它完全工作