Vue.js过渡效果基础[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

Vue.js过渡效果是Vue.js框架中用于在DOM元素插入、更新或移除时添加动画或平滑视觉变化的机制。通过内置的<transition>组件，开发者可以轻松实现CSS或JavaScript驱动的过渡效果，无需依赖第三方库。过渡效果常见于交互式UI组件（如模态框、列表项、路由切换等），能显著提升用户体验。

核心概念[编辑 | 编辑源代码]

Vue.js过渡效果基于以下核心概念：

触发条件：元素通过v-if、v-show或动态组件切换时触发。
过渡类名：Vue自动为元素添加6个CSS类名（如v-enter、v-leave-to），开发者通过定义这些类的样式实现动画。
钩子函数：支持JavaScript动画，通过事件钩子（如beforeEnter、enter）实现复杂逻辑。

基本用法[编辑 | 编辑源代码]

以下是一个简单的CSS过渡示例，实现淡入淡出效果：

<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-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

输出效果： 1. 点击按钮时，文本会以0.5秒的淡入/淡出动画显示或隐藏。 2. Vue自动应用以下类名：

  * fade-enter → 进入动画的起始状态  
  * fade-enter-active → 进入动画的激活状态

过渡类名详解[编辑 | 编辑源代码]

Vue.js过渡包含6个类名，命名规则为name-xxx（若未设置name属性，则默认为v-xxx）：

进入阶段：

 * v-enter：元素插入前的样式（动画开始状态）。  
 * v-enter-active：进入动画的持续时间和缓动函数。  
 * v-enter-to：动画结束状态（Vue 2.1.8+）。

离开阶段：

 * v-leave：离开动画的起始状态。  
 * v-leave-active：离开动画的持续时间和缓动函数。  
 * v-leave-to：离开动画的结束状态。

JavaScript 钩子[编辑 | 编辑源代码]

通过JavaScript实现动画（例如与GSAP库结合）：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <div v-if="show">JS动画示例</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    // 使用GSAP或requestAnimationFrame
    setTimeout(() => { el.style.opacity = 1; done(); }, 1000);
  }
}

实际案例：列表排序动画[编辑 | 编辑源代码]

通过<transition-group>实现列表项的平滑排序：

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

.list-move {
  transition: transform 0.8s ease;
}

效果：当列表顺序变化时，元素会以0.8秒的动画移动到新位置。

数学公式（可选）[编辑 | 编辑源代码]

缓动函数常用三次贝塞尔曲线表示： $B (t) = (1 - t)^{3} P_{0} + 3 (1 - t)^{2} t P_{1} + 3 (1 - t) t^{2} P_{2} + t^{3} P_{3}$ 其中 $P_{0}$ 到 $P_{3}$ 为控制点，Vue默认使用ease（等价于 $c u b i c - b e z i e r (0.25, 0.1, 0.25, 1)$ ）。

总结[编辑 | 编辑源代码]

Vue.js过渡效果通过声明式语法简化了动画实现，适用于：

元素显示/隐藏（v-if、v-show）
动态组件切换
列表项更新（transition-group）

开发者可根据需求选择CSS或JavaScript方案，并灵活组合缓动函数与钩子实现复杂交互。