编辑“︁Vue.js多元素过渡”︁

{{DISPLAYTITLE:Vue.js多元素过渡}}

'''Vue.js多元素过渡'''是Vue.js框架中用于在多个元素之间实现平滑动画效果的技术。通过<code>transition</code>或<code>transition-group</code>组件，开发者可以轻松地为动态切换的多个DOM元素添加进入/离开动画，提升用户体验。本章将详细介绍其工作原理、实现方式及实际应用场景。

== 基本概念 ==
在Vue中，多元素过渡通常用于以下场景：
* 列表项的动态增删（如待办事项列表）
* 条件渲染的多个元素切换（如选项卡内容）
* 相同标签名元素的替换（如<code>div</code>切换）

Vue通过以下机制实现多元素过渡：
# 自动检测元素的插入/删除
# 在适当时机添加CSS类名（如<code>v-enter</code>/<code>v-leave</code>）
# 支持JavaScript钩子函数实现复杂动画

== 基础实现 ==
=== 使用transition组件 ===
当需要在两个元素间切换时，可以用<code>transition</code>包裹并设置<code>key</code>属性：

<syntaxhighlight lang="html">
<transition name="fade" mode="out-in">
  <div v-if="show" key="on">Hello</div>
  <div v-else key="off">Goodbye</div>
</transition>
</syntaxhighlight>

对应的CSS样式：
<syntaxhighlight lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</syntaxhighlight>

'''关键点说明：'''
* <code>mode="out-in"</code>确保当前元素先完成离开动画，新元素再进入
* 必须为元素设置唯一的<code>key</code>，否则Vue会复用DOM元素导致动画失效

=== 过渡模式 ===
Vue提供两种过渡模式：
{| class="wikitable"
|-
! 模式 !! 描述
|-
| <code>in-out</code> || 新元素先进入，当前元素后离开
|-
| <code>out-in</code> || 当前元素先离开，新元素后进入
|}

<mermaid>
graph LR
  A[元素A显示] -->|out-in| B[元素A离开动画]
  B --> C[元素B进入动画]
  C --> D[元素B显示]
</mermaid>

== 列表过渡（transition-group）==
对于动态列表，需使用<code>transition-group</code>组件：

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

CSS示例（实现列表项动画）：
<syntaxhighlight lang="css">
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
/* 确保离开项不占用布局空间 */
.list-leave-active {
  position: absolute;
}
</syntaxhighlight>

== 高级技巧 ==
=== 交错动画 ===
通过JavaScript钩子和数据索引实现列表项交错动画：

<syntaxhighlight lang="javascript">
methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transform = `translateY(${20 * el.dataset.index}px)`
  },
  enter(el, done) {
    gsap.to(el, {
      opacity: 1,
      y: 0,
      delay: el.dataset.index * 0.1,
      onComplete: done
    })
  }
}
</syntaxhighlight>

=== 可复用过渡 ===
创建可复用的过渡组件：
<syntaxhighlight lang="javascript">
Vue.component('fade-transition', {
  template: `
    <transition
      name="fade"
      @before-enter="beforeEnter"
      @enter="enter"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <slot></slot>
    </transition>
  `,
  methods: {
    beforeEnter(el) { /* ... */ },
    enter(el, done) { /* ... */ }
  }
})
</syntaxhighlight>

== 数学原理 ==
Vue的过渡系统基于以下插值公式实现平滑动画：

<math>
f(t) = 
\begin{cases} 
ease(t) & \text{进入动画} \\
1 - ease(1 - t) & \text{离开动画}
\end{cases}
</math>

其中<math>ease(t)</math>是缓动函数，常见的有：
* 线性：<math>ease(t) = t</math>
* 二次方：<math>ease(t) = t^2</math>
* 贝塞尔曲线：<math>ease(t) = 3t^2 - 2t^3</math>

== 实际案例 ==
=== 购物车列表 ===
实现购物车商品添加/删除时的飞入动画：
<syntaxhighlight lang="html">
<transition-group 
  name="cart" 
  tag="div"
  @enter="playSound"
>
  <div v-for="item in cart" :key="item.id" class="cart-item">
    <!-- 商品内容 -->
  </div>
</transition-group>
</syntaxhighlight>

=== 图片画廊 ===
图片切换时的交叉淡入淡出效果：
<syntaxhighlight lang="html">
<transition :name="transitionName" mode="out-in">
  <img :key="currentImage.id" :src="currentImage.url">
</transition>
</syntaxhighlight>

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 动画不生效 || 检查是否设置了<code>key</code>属性
|-
| 布局抖动 || 为离开项添加<code>position: absolute</code>
|-
| 性能问题 || 避免同时激活过多动画，使用<code>will-change</code>
|}

== 最佳实践 ==
* 始终为动态元素设置唯一的<code>key</code>
* 简单动画优先使用CSS过渡
* 复杂动画考虑GSAP等专业库
* 移动端注意硬件加速（使用<code>transform</code>和<code>opacity</code>属性）
* 提供动画关闭选项（尊重用户偏好）

通过掌握多元素过渡技术，开发者可以显著提升Vue应用的交互体验。建议结合官方文档和实际项目需求灵活运用这些模式。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js过渡与动画]]