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

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

组件

我在用 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;
}

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

动画组件

我来解答赞 2 收藏

反馈

1 条解答

西门子格 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