编辑“︁Vue.js JavaScript动画”︁（章节）

== 基本示例 ==

下面是一个使用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动画已完成