Vue transition组件包裹v-tour时过渡效果不生效如何解决

• 三个分支的<v-tour>是同组件切换，Vue默认会复用组件实例，不会触发进入/离开过渡流程，必须给每个分支加唯一key标识
• 过渡类名写法不完整，没有定义enter-active/leave-active激活态的过渡时长、缓动规则，浏览器没有补间动画的执行依据，状态会瞬间切换
• 类名规则和Vue版本不匹配：Vue3把进入起始类从v-enter改成了v-enter-from、离开结束类从v-leave改成了v-leave-to，用Vue3的话旧类名不会生效
• 额外注意：如果v-tour的弹窗是通过Teleport传送到body节点下的，.modal-enter .modal-container这种嵌套选择器无法选中脱离父级DOM树的弹窗元素，会导致缩放动画不生效

1. 给所有切换的v-tour组件加唯一key #

修改模板代码，给每个v-if/v-else-if/v-else分支的组件加互不重复的key，让Vue识别为独立节点，触发过渡：

<template>
<transition name="modal" mode="out-in">
    <v-tour v-if="tourType === 'normal'"
        key="normal-tour"
        name="myTour"
        :steps="steps"
    />
    <v-tour
        v-else-if="tourType === 'tip'"
        key="tip-tour"
        type="tip"
        name="myTour"
        :sticky="true"
    />
    <v-tour 
        v-else
        key="custom-tour"
        :type="tourType"
        name="myTour"
    />
</transition>
</template>

2. 按所用Vue版本修正过渡样式 #

补全激活态的transition规则，定义动画时长和缓动效果：

如果你用Vue 2.x #

/* 进入初始状态、离开结束状态 */
.modal-enter, .modal-leave-to {
  opacity: 0;
}
/* 过渡执行阶段的规则，定义动画时长、缓动函数 */
.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 弹窗容器的缩放变换 */
.modal-enter .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

如果你用Vue 3.x #

/* 进入初始状态、离开结束状态 */
.modal-enter-from, .modal-leave-to {
  opacity: 0;
}
/* 过渡执行阶段的规则，定义动画时长、缓动函数 */
.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 弹窗容器的缩放变换 */
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

3. 弹窗被Teleport传送的特殊处理 #

如果完成上面两步后缩放动画还是不生效，说明v-tour的弹窗被传送到了body节点下，不在transition组件的DOM子树里，嵌套选择器无法命中。这时候可以：

• 查阅v-tour的组件文档，给弹窗根节点配置自定义class，直接把过渡类绑定到弹窗容器上
• 使用transition组件的自定义类名props（enter-from-class/enter-active-class/leave-active-class/leave-to-class），把类名透传给v-tour内部的弹窗节点
• 移除选择器的嵌套关系，直接给.modal-container定义过渡规则，配合进入离开类控制状态

内容的提问来源于stack exchange，提问作者Santiago Hurtado