Vue 3中transition-group组件appear属性不生效问题咨询

云上老周

2026-9-26

结论

<transition-group> 完全支持 appear 属性，该属性本身不存在兼容性限制，你遇到的动画类未自动应用的问题可以从以下几个常见方向排查：

检查Vue版本：Vue2 2.1.0以下版本对<transition-group>的appear属性支持存在缺陷，升级到Vue2.1.0+或任意Vue3版本即可解决。

检查动画类定义是否完整：初始渲染的动画类和普通节点插入的enter类是两套独立规则，你需要额外定义appear专属的动画类，如果希望初始动画和普通enter动画效果一致，可以合并定义：

/* Vue3 写法 */
.flip-enter-active, .flip-appear-active {
  transition: all 0.5s ease;
}
.flip-enter-from, .flip-appear-from {
  opacity: 0;
  transform: translateY(10px);
}
.flip-enter-to, .flip-appear-to {
  opacity: 1;
  transform: translateY(0);
}

/* Vue2 写法 */
.flip-enter-active, .flip-appear-active {
  transition: all 0.5s ease;
}
.flip-enter, .flip-appear {
  opacity: 0;
  transform: translateY(10px);
}

如果你只定义了普通enter/leave类，没有定义appear相关类，初始渲染时自然不会触发动画效果。

检查子节点是否有可观测的样式：你当前示例中的<li>是空节点，如果没有设置宽高、内容或其他可见样式，就算动画类被正确添加也看不到效果，可以先给<li>添加临时的固定宽高和背景色验证。
检查<transition-group>的渲染时机：如果<transition-group>外层包裹了初始值为false的v-if，appear属性只会在组件第一次被挂载到DOM时生效，如果组件是后续条件渲染出来的，会走普通enter动画逻辑，不会触发appear规则。