Vue Transition过渡类未应用问题求助（仅Edge Dev环境）

针对你遇到的过渡类未被应用、切换仅触发文本变化无动画的问题，仅在Edge Dev浏览器出现的情况，可通过以下方案解决：

• 给<Transition>包裹的两个div添加唯一key属性，修改后的模板代码如下：

<template>
  <button @click="show = !show">Toggle Slide + Fade</button>
  <Transition name="slide-right" appear>
    <div v-if="show" key="hello">hello</div>
    <div v-else key="world">world</div>
  </Transition>
</template>

原因说明 #

Vue的<Transition>组件依赖DOM节点的创建/销毁流程触发过渡动画。当你用v-if/v-else切换两个同类型（均为div）的元素时，Vue会尝试复用现有DOM节点以优化性能，这会导致过渡类无法被正确挂载。Edge Dev浏览器在节点复用的判定逻辑上与其他浏览器存在差异，添加唯一key可以强制Vue识别这是两个独立的节点，从而触发完整的过渡动画流程。

额外检查项 #

• 确认Edge Dev未开启「禁用CSS动画」选项（可在设置→系统和性能→性能中查看）
• 检查硬件加速功能是否开启，部分过渡效果依赖硬件加速支持

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