为什么我的转换在 "leave" 上不起作用？

Question

我有一个全局 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 部分根本不会触发。

调用此模式的组件如下所示：

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

这是它目前的样子的 gif 动图：

编辑：我通过从父组件用 Transition 包装 ConfirmModal.vue 实现了想要的结果，如下所示：

    <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工作正常

它也不理想，因为每次我使用这个组件时，我都必须考虑将它包装在这个转换中以使其完全工作

Answer 1

可能是使用不同版本的Vue造成的

您的问题被标记为 vuejs3，因此您很可能使用 Vue 3，但是，在您 linked 的示例中，使用的是 vue 版本 2.6.4。

至少在 vue 3 中，您必须在 Transition 组件内的根元素中使用指令 v-if 或 v-show 以便它在根组件时触发更改里面出现又消失。

您可以阅读有关转换的更多信息here

为什么我的转换在 "leave" 上不起作用？

Why is my transition not working on "leave"?

vue.js

vue-transitions

vuejs3