编辑“︁Vue.js Velocity.js集成”︁（章节）

== 基本用法 ==

Vue.js 的 `<transition>` 组件提供了 JavaScript 钩子（如 `enter`、`leave`），可以在这些钩子中调用 Velocity.js 的动画方法。

=== 示例：元素进入和离开动画 ===
以下是一个简单的示例，展示如何在 Vue.js 中使用 Velocity.js 实现元素的淡入和滑动效果。

<syntaxhighlight lang="javascript">
<template>
  <div>
    <button @click="show = !show">切换动画</button>
    <transition
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="show" class="box">这是一个动画示例</div>
    </transition>
  </div>
</template>

<script>
import Velocity from 'velocity-animate';

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    enter(el, done) {
      Velocity(el, { opacity: 1, height: '100px' }, { duration: 500, complete: done });
    },
    leave(el, done) {
      Velocity(el, { opacity: 0, height: '0px' }, { duration: 500, complete: done });
    }
  }
};
</script>

<style>
.box {
  background: #42b983;
  color: white;
  padding: 10px;
  margin-top: 10px;
  height: 0;
  opacity: 0;
}
</style>
</syntaxhighlight>

'''代码解释：'''
1. 通过 `@enter` 和 `@leave` 钩子调用 Velocity.js 动画。
2. `:css="false"` 告诉 Vue.js 跳过 CSS 过渡的自动检测。
3. `complete: done` 确保动画完成后 Vue.js 知道过渡结束。
4. 初始状态通过 CSS 设置为 `height: 0` 和 `opacity: 0`。