Vue 3 Transition组件leave离开动画失效，enter进入动画运行正常问题求助

问题排查&解决方法 #

1 优先排查样式作用域问题 #

这是最常见的触发原因：如果你的父组件<style>标签加了scoped属性，受Vue样式隔离机制限制，父组件定义的.openedBar-leave-active这类过渡类默认无法作用到子组件NavBar的根元素上，就会出现进入动画正常、离开动画直接消失的问题。

修复方案二选一：

• 把过渡相关的所有样式移到NavBar组件的样式文件中
• 在父组件用深度选择器穿透样式隔离，示例代码：

/* Vue3 写法 */
:deep(.openedBar-enter-active) {
  animation: modal 1.1s ease-out;
}
:deep(.openedBar-leave-active) {
  animation: modal 1.1s ease-in reverse;
}

/* Vue2 写法把:deep换成/deep/即可 */

2 替换动画写法避免reverse异常 #

部分浏览器对animation reverse的解析存在兼容问题，可以单独定义离开动画的关键帧，避免反向动画的异常：

.openedBar-leave-active {
  animation: modalLeave 1.1s ease-in;
}

@keyframes modalLeave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
}

3 其他验证方式 #

打开浏览器开发者工具的元素面板，点击关闭菜单时观察NavBar根元素是否会临时添加openedBar-leave-active类：

• 没有出现类：检查v-if绑定的burgerIsOpened状态切换逻辑是否正常、transition组件是否包裹正确
• 出现类但样式没生效：检查选择器优先级，是否有其他全局样式覆盖了过渡动画属性

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