Vue.js 进入 离开过渡

Vue.js 进入/离开过渡

Vue.js 进入/离开过渡是 Vue.js 提供的一种动画机制，用于在元素插入或移除 DOM 时应用平滑的过渡效果。通过结合 CSS 过渡或 JavaScript 动画，开发者可以轻松实现元素的淡入淡出、滑动、缩放等视觉效果，提升用户体验。

基本概念

在 Vue.js 中，进入/离开过渡通过 `<transition>` 组件实现。当以下条件满足时，Vue 会自动应用过渡效果：

• 元素通过 `v-if` 或 `v-show` 控制显示/隐藏
• 动态组件切换（使用 `<component :is="...">`）
• 列表渲染中的元素变化（结合 `<transition-group>`）

Vue 的过渡系统会在适当的时机自动添加/移除 CSS 类名，开发者只需定义这些类名对应的样式即可。

工作原理

Vue.js 的过渡过程分为 6 个阶段，对应 6 个 CSS 类名：

graph LR A[v-enter-from] --> B[v-enter-active] B --> C[v-enter-to] D[v-leave-from] --> E[v-leave-active] E --> F[v-leave-to]

1. v-enter-from：进入动画的起始状态 2. v-enter-active：进入动画的激活状态（定义过渡持续时间、缓动函数等） 3. v-enter-to：进入动画的结束状态 4. v-leave-from：离开动画的起始状态 5. v-leave-active：离开动画的激活状态 6. v-leave-to：离开动画的结束状态

基本示例

以下是一个简单的淡入淡出过渡示例：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">Hello Vue!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>

代码解释： 1. 点击按钮切换 `show` 的值

2. 当 `show` 为 `true` 时，`

` 元素会应用淡入效果 3. 当 `show` 为 `false` 时，`

` 元素会应用淡出效果 4. CSS 定义了过渡的起始/结束状态和动画属性

自定义过渡类名

Vue 允许自定义过渡类名，方便与第三方动画库（如 Animate.css）集成：

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <p v-if="show">使用 Animate.css 的动画</p>
</transition>

JavaScript 钩子

除了 CSS 过渡，Vue 还提供了 JavaScript 钩子函数实现更复杂的动画：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- 内容 -->
</transition>

示例实现：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transform = 'translateX(100px)'
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      translateX: 0,
      duration: 500,
      complete: done
    })
  }
}

列表过渡

对于 `v-for` 渲染的列表，使用 `<transition-group>` 实现每个元素的过渡效果：

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

实际应用案例

场景：电商网站购物车商品添加/移除动画

<transition-group name="cart-item" tag="div">
  <div v-for="item in cart" :key="item.id" class="cart-item">
    <img :src="item.image" :alt="item.name">
    <span>{{ item.name }}</span>
    <button @click="removeFromCart(item.id)">×</button>
  </div>
</transition-group>

<style>
.cart-item-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.cart-item-enter-active {
  transition: all 0.3s ease;
}

.cart-item-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}

.cart-item-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.cart-item-move {
  transition: transform 0.3s ease;
}
</style>

性能优化建议

1. 尽量使用 CSS 过渡而非 JavaScript 动画 2. 对 `transform` 和 `opacity` 属性做动画（这些属性不会触发重排） 3. 避免同时动画大量元素 4. 使用 `will-change` 属性提示浏览器优化：

   .animated-element {
     will-change: transform, opacity;
   }

数学原理

CSS 过渡基于缓动函数（easing functions），常见的缓动函数包括：

• 线性过渡：$f(t)=t$
• 缓入（ease-in）：$f(t)=t^2$
• 缓出（ease-out）：$f(t)=1-(1-t{)}^2$
• 标准缓动（ease-in-out）：$f(t)=\{\begin{array}{ll}2t^2& \text{当 }0\le t<0.5\\ 1-2(1-t{)}^2& \text{当 }0.5\le t\le 1\end{array}$

总结

Vue.js 的进入/离开过渡系统提供了一种声明式的方式来实现元素显示/隐藏时的动画效果。通过合理使用 CSS 过渡或 JavaScript 动画钩子，开发者可以创建流畅的用户界面交互。关键点包括：

1. 理解 Vue 的过渡类名生命周期 2. 掌握 CSS 过渡的基本写法 3. 了解如何与第三方动画库集成 4. 学会处理列表过渡的特殊情况 5. 注意动画性能优化

通过本文的学习，开发者应该能够在实际项目中灵活应用 Vue.js 的过渡系统，创建更加动态、吸引人的用户界面。