编辑“︁Vue.js过渡效果基础”︁

= Vue.js过渡效果基础 =

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

== 核心概念 ==  
Vue.js过渡效果基于以下核心概念：  
* '''触发条件'''：元素通过<code>v-if</code>、<code>v-show</code>或动态组件切换时触发。  
* '''过渡类名'''：Vue自动为元素添加6个CSS类名（如<code>v-enter</code>、<code>v-leave-to</code>），开发者通过定义这些类的样式实现动画。  
* '''钩子函数'''：支持JavaScript动画，通过事件钩子（如<code>beforeEnter</code>、<code>enter</code>）实现复杂逻辑。  

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

'''输出效果'''：  
1. 点击按钮时，文本会以0.5秒的淡入/淡出动画显示或隐藏。  
2. Vue自动应用以下类名：  
   * <code>fade-enter</code> → 进入动画的起始状态  
   * <code>fade-enter-active</code> → 进入动画的激活状态  

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

<mermaid>
classDiagram
    class Transition {
        +v-enter
        +v-enter-active
        +v-enter-to
        +v-leave
        +v-leave-active
        +v-leave-to
    }
</mermaid>

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

* '''离开阶段'''：  
  * <code>v-leave</code>：离开动画的起始状态。  
  * <code>v-leave-active</code>：离开动画的持续时间和缓动函数。  
  * <code>v-leave-to</code>：离开动画的结束状态。  

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

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

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

== 实际案例：列表排序动画 ==  
通过<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>

<syntaxhighlight lang="css">
.list-move {
  transition: transform 0.8s ease;
}
</syntaxhighlight>

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

== 数学公式（可选） ==  
缓动函数常用三次贝塞尔曲线表示：  
<math>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</math>  
其中<math>P_0</math>到<math>P_3</math>为控制点，Vue默认使用<code>ease</code>（等价于<math>cubic-bezier(0.25, 0.1, 0.25, 1)</math>）。  

== 总结 ==  
Vue.js过渡效果通过声明式语法简化了动画实现，适用于：  
* 元素显示/隐藏（<code>v-if</code>、<code>v-show</code>）  
* 动态组件切换  
* 列表项更新（<code>transition-group</code>）  
开发者可根据需求选择CSS或JavaScript方案，并灵活组合缓动函数与钩子实现复杂交互。

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