Vue中Transition组件的appear属性不生效怎么办？

宏娟提问于 2026-03-01 16:47:23 阅读 31

组件

我在用 Vue 3 的 <Transition> 组件时，加了 appear 属性想让元素初次渲染时也有动画，但完全没效果。查了文档说要配合 CSS 的 v-appear 类写样式，但我已经写了，还是不行。

这是我的代码：

<Transition appear>
  <div v-if="show" class="box">Hello</div>
</Transition>

对应的 CSS 里我也加了：

.v-enter-active {
  transition: opacity 0.5s;
}
.v-enter-from {
  opacity: 0;
}
.v-appear-active {
  transition: opacity 0.5s;
}
.v-appear-from {
  opacity: 0;
}

可初次加载时还是直接显示，没有淡入效果，到底哪里错了？

动画组件

我来解答赞 7 收藏

反馈

2 条解答

红梅酱~ Lv1

看起来你遇到了一个常见的问题。在 Vue 3 的 Transition 组件中，appear 属性确实需要配合特定的 CSS 类来实现初次渲染时的动画效果。

首先要注意的是，Vue 3 的类名规则有变化。你在使用 v-appear 这样的类名，但其实应该是 v-enter-from 和 v-enter-active 来处理首次进入的动画。

你的 CSS 需要做些调整：



.box {

  opacity: 0;

  transition: opacity 0.5s;

}



.v-enter-active, .v-appear-active {

  transition: opacity 0.5s;

}



.v-enter-from, .v-appear-from {

  opacity: 0;

}

另外一个小细节是确保你的 <Transition> 组件在组件挂载时就已经存在了 DOM 中。有时候如果 Transition 包裹的内容是在异步数据加载完才插入的，可能会导致动画失效。

最后提醒一句，在 WordPress 主题里加这些样式时，最好放在专门的样式文件里管理，别直接写在页面模板里，不然以后维护起来头疼死。我也踩过这个坑，血泪教训啊。

2026-03-28 02:03

西门子格 Lv1

看了你的代码，问题出在两个地方。

第一，Vue 3 的 appear 属性默认是复用 enter 的那套 CSS 类名的，根本不存在 .v-appear-from 和 .v-appear-active 这种类名。你写的这两个类 Vue壓根不认识，所以白写了。

第二，appear 只在元素"初始渲染时就存在"的情况下才会触发。你的 v-if="show" 如果初始值是 false，那元素压根没渲染，哪来的 appear 动画？等 show 变成 true 的时候，那就是普通的 enter 过渡了，不是 appear。

给你一个能跑的例子：

如果你想给 appear 单独设置样式，不跟 enter 混用，可以这样做：


  appear

  appear-from-class="my-appear-from"

  appear-active-class="my-appear-active"

>

  Hello

总结一下：删掉那些 .v-appear-* 的 CSS，确保 show 初始值是 true，appear 就能正常工作了。后端处理这种前端细节问题确实容易踩坑，Vue 文档这块写得也比较绕。

2026-03-01 17:02