Vue过渡动画技巧，transition组件实战

二、transition-group 处理列表过渡动画

如果你要给 v-for 渲染出来的列表加上动画，就不能再用普通的 ，得换成 。

比如一个简单的待办事项列表：

<transition-group name="list" tag="ul">
  <li v-for="item in list" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

这里的 tag="ul" 指定最终渲染成哪个标签，否则默认是 。CSS 动画写法和上面类似，但要注意的一点是：使用 时，每个子元素必须有 key 属性，这是 Vue 判断元素唯一性的依据。

三、用 JavaScript 钩子做更精细控制

大多数情况用 CSS 写过渡就够用了。但如果想在动画过程中执行一些逻辑，比如在动画结束后发送请求、修改数据等，可以用 JavaScript 钩子。

支持的钩子包括：

• @before-enter
• @enter
• @after-enter
• @enter-cancelled
• @before-leave
• @leave
• @after-leave
• @leave-cancelled

举个例子，你想在元素进入时滚动到底部，可以这样写：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
>
  <p v-if="show">动态内容</p>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    // 手动控制动画结束
    setTimeout(() => {
      el.style.opacity = 1;
      done(); // 必须调用 done()，否则 after-enter 不会触发
    }, 300);
  }
}

这种写法适合需要结合第三方动画库（比如 GSAP）的情况。

四、注意几个容易出问题的地方

1. 过渡状态没变化，动画不会触发
   比如你只是改了某个类名，但 DOM 没有插入或移除，这时候动画可能不会运行。确保你是通过 v-if、v-show 或 v-for 来改变节点的存在状态。

2. v-show 和 v-if 的区别
   支持 v-if 和 v-show，但 v-show 是通过 display 控制显隐，所以不能配合 JavaScript 进入/离开钩子一起用。

3. name 属性决定类名前缀
   如果你不写 name，默认会用 v-enter、v-leave 这样的类名。建议自己指定 name，避免和其他样式冲突。

基本上就这些。Vue 的过渡机制虽然功能强大，但理解清楚生命周期钩子和类名规则之后，用起来还是很顺手的。

本篇关于《Vue过渡动画技巧，transition组件实战》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！