编辑“︁Vue.js JavaScript动画”︁

= Vue.js JavaScript动画 =

'''Vue.js JavaScript动画'''是Vue.js框架中实现动态效果的一种高级方式，它允许开发者通过JavaScript直接控制元素的过渡和动画行为，而不仅仅依赖于CSS。这种方式提供了更精细的控制能力，适用于复杂的交互场景。

== 介绍 ==

在Vue.js中，动画通常通过`<transition>`和`<transition-group>`组件实现。当使用CSS动画时，Vue会自动添加/移除CSS类。但在某些情况下，开发者可能需要通过JavaScript直接操作动画，例如：
* 需要与第三方动画库（如GSAP、Anime.js）集成
* 需要基于复杂逻辑动态控制动画
* 需要精确控制动画的每一步

Vue.js通过'''JavaScript钩子函数'''提供了这种能力，允许在动画的不同阶段插入自定义JavaScript代码。

== JavaScript动画钩子 ==

Vue为`<transition>`组件提供了以下JavaScript钩子：

```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>
```

每个钩子都会接收一个参数：被动画作用的DOM元素。

=== 钩子函数详解 ===

{| class="wikitable"
|+ JavaScript动画钩子函数
! 钩子函数 !! 描述 !! 调用时机
|-
| before-enter || 元素插入前调用 || 在enter过渡开始前
|-
| enter || 元素插入时调用 || 在enter过渡过程中
|-
| after-enter || 元素插入后调用 || 在enter过渡完成后
|-
| enter-cancelled || enter取消时调用 || 当enter过渡被中断
|-
| before-leave || 元素移除前调用 || 在leave过渡开始前
|-
| leave || 元素移除时调用 || 在leave过渡过程中
|-
| after-leave || 元素移除后调用 || 在leave过渡完成后
|-
| leave-cancelled || leave取消时调用 || 当leave过渡被中断
|}

== 基本示例 ==

下面是一个使用JavaScript动画的基本示例：

```html
<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <p v-if="show">这是一个JavaScript动画示例</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateX(100px)'
    },
    enter(el, done) {
      // 使用Velocity.js动画库
      Velocity(el, 
        { opacity: 1, translateX: '0px' },
        { duration: 500, complete: done }
      )
    },
    leave(el, done) {
      Velocity(el,
        { opacity: 0, translateX: '100px' },
        { duration: 500, complete: done }
      )
    }
  }
}
</script>
```

=== 代码解释 ===

1. '''beforeEnter'''：在元素插入前设置初始状态（完全透明且向右偏移100px）
2. '''enter'''：使用Velocity.js动画库实现平滑过渡到完全不透明且无偏移
3. '''leave'''：与enter相反，元素淡出并向右移动
4. '''done'''：这是一个回调函数，必须在动画完成时调用，以告知Vue动画已完成

== 动画生命周期 ==

<mermaid>
graph LR
    A[元素插入] --> B[before-enter]
    B --> C[enter]
    C --> D[after-enter]
    D --> E[显示状态]
    F[元素移除] --> G[before-leave]
    G --> H[leave]
    H --> I[after-leave]
    I --> J[元素移除]
</mermaid>

== 与第三方库集成 ==

Vue.js的JavaScript动画特性使其可以轻松与流行动画库集成。以下是使用GSAP（GreenSock Animation Platform）的示例：

```html
<template>
  <div>
    <button @click="show = !show">切换GSAP动画</button>
    <transition
      @enter="enterGsap"
      @leave="leaveGsap"
      :css="false"
    >
      <p v-if="show" class="gsap-box">GSAP动画示例</p>
    </transition>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    enterGsap(el, done) {
      gsap.from(el, {
        duration: 1,
        x: 200,
        opacity: 0,
        ease: 'bounce.out',
        onComplete: done
      })
    },
    leaveGsap(el, done) {
      gsap.to(el, {
        duration: 0.5,
        x: -200,
        opacity: 0,
        ease: 'power2.in',
        onComplete: done
      })
    }
  }
}
</script>
```

=== 关键点 ===

* `:css="false"`：告诉Vue跳过CSS动画检测，提高性能
* GSAP提供了丰富的缓动函数（ease）和高级动画功能
* 仍然需要在动画完成时调用`done`回调

== 实际应用案例 ==

'''场景'''：电子商务网站的产品添加到购物车动画

```html
<template>
  <div>
    <div class="products">
      <div 
        v-for="product in products" 
        :key="product.id"
        class="product"
        @click="addToCart(product)"
      >
        {{ product.name }}
      </div>
    </div>
    
    <transition-group
      @enter="enterCart"
      @leave="leaveCart"
      :css="false"
      tag="div"
      class="cart"
    >
      <div 
        v-for="item in cart" 
        :key="item.id"
        class="cart-item"
      >
        {{ item.name }}
      </div>
    </transition-group>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      products: [
        { id: 1, name: '产品A' },
        { id: 2, name: '产品B' },
        { id: 3, name: '产品C' }
      ],
      cart: []
    }
  },
  methods: {
    addToCart(product) {
      this.cart.push(product)
    },
    enterCart(el, done) {
      // 从点击位置飞到购物车
      gsap.from(el, {
        duration: 0.5,
        x: this.clickX - el.getBoundingClientRect().left,
        y: this.clickY - el.getBoundingClientRect().top,
        scale: 0.5,
        opacity: 0,
        ease: 'power2.out',
        onComplete: done
      })
    },
    leaveCart(el, done) {
      // 从购物车中淡出
      gsap.to(el, {
        duration: 0.3,
        opacity: 0,
        y: -20,
        scale: 0.8,
        ease: 'power2.in',
        onComplete: done
      })
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      this.clickX = e.clientX
      this.clickY = e.clientY
    })
  }
}
</script>
```

== 性能考虑 ==

使用JavaScript动画时应注意：
* 避免在动画中使用会触发重排的属性
* 对于简单动画，CSS动画通常性能更好
* 使用`will-change`属性提示浏览器哪些属性会变化
* 考虑使用`requestAnimationFrame`进行动画循环

== 数学基础 ==

许多动画库使用缓动函数来控制动画进度。一个常见的二次缓动函数可以表示为：

<math>f(t) = t^2</math>

其中：
* <math>t</math> 是时间进度（0到1之间）
* <math>f(t)</math> 是动画进度

更复杂的三次贝塞尔曲线常用于高级动画：

<math>B(t) = P_0(1-t)^3 + 3P_1t(1-t)^2 + 3P_2t^2(1-t) + P_3t^3</math>

== 总结 ==

Vue.js JavaScript动画提供了：
* 对动画过程的完全控制
* 与第三方动画库的无缝集成
* 基于复杂逻辑的动态动画能力
* 更丰富的交互可能性

对于需要超出CSS能力的复杂动画场景，JavaScript动画是理想选择。然而，对于简单过渡，CSS动画可能更简单高效。开发者应根据具体需求选择合适的方法。

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