Vue.js 是一个流行的 JavaScript 框架，用于构建现代化的 Web 应用。在 Vue.js 中使用 transition，可以实现优美的动画效果。本文将介绍 transition 的基本概念和用法，并提供示例代码，帮助你轻松实现动画效果。
transition 概述
transition 是 Vue.js 内置的一种组件动画机制，它允许你在 Vue.js 组件中添加动画效果。transition 允许你在组件插入或删除时添加 CSS 类，从而触发动画效果。
在 Vue.js 中使用 transition 的基本流程如下：
- 定义 transition 组件，并指定触发动画的类名；
- 在组件中使用 v-if 或者 v-show 指令来控制组件的插入和删除；
- Vue.js 在插入或删除时，自动添加或删除指定的 CSS 类名，从而触发动画效果。
Vue.js 支持四种不同类型的 transition：
- v-enter： 在元素插入时启用；
- v-enter-active： 在元素插入时生效，直到过渡完成（即在动画结束时被删除）；
- v-leave： 在元素删除时启用；
- v-leave-active： 在元素删除时生效，直到过渡完成。
除此之外，Vue.js 还提供了一些其他的钩子函数（如 before-enter、after-enter、before-leave、after-leave 等），用于在动画前后执行一些操作。
下面我们来详细介绍如何使用 transition 实现动画效果。
使用 transition 实现动画效果
基本用法
首先，我们定义一个 transition 组件，指定触发动画的类名。我们可以将这个组件定义在当前组件的模板中，也可以将其定义在全局组件中。
<transition name="fade">
<div v-if="isVisible">
Hello, world!
</div>
</transition>在上面的示例代码中，我们定义了一个名为 fade 的 transition 组件，并将其包装在一个 div 中。当 isVisible 变为 true 时，该组件会被插入，从而触发动画效果。同样地，当 isVisible 变为 false 时，该组件会被删除，也会触发动画效果。
把下面的样式加入到你的 CSS 文件中，你就可以看到一个渐变的动画：
-- -------------------- ---- ------- ------------------- ------------------ - ----------- ------- ---- - ------------ -------------- - -------- -- -
下面我们来逐一解释这些 CSS 类的作用：
fade-enter-active 和 fade-leave-active： 负责定义属性过渡的开始和结束状态。我们在这里定义了一个通用的 transition 属性，它控制动画效果的持续时间和过渡类型。这个动画效果会在组件插入或删除时触发。
fade-enter 和 fade-leave-to： 负责定义组件插入或删除的起始和终止状态。我们可以使用这些类来定义过渡动画的具体效果。例如，在上面的示例中，我们定义了一个 opacity 属性，让组件在插入和删除时，从不透明到透明，从而实现了一个渐变的动画效果。
在这个示例中，我们使用了 opacity 属性，并通过 transition 属性控制了动画的持续时间和过渡类型。但实际上，我们可以使用任何 CSS 属性，例如 transform、background-color 等，来实现我们想要的过渡动画效果。
自定义钩子函数
除了定义基本的 transition 类名外，Vue.js 还提供了一些钩子函数，在动画开始前、进行中、结束时执行一些操作。例如，在动画结束时，我们可以使用 after-leave 钩子函数，来执行一些清理工作。下面是一个自定义钩子函数的示例：
<transition name="fade"
v-on:before-enter="beforeEnter"
v-on:enter="enter">
<div v-if="isVisible">
Hello, world!
</div>
</transition>在上面的示例代码中，我们使用了 v-on 指令，将 before-enter 和 enter 钩子函数绑定在 transition 组件上。这样，在动画开始前和进行中时，Vue.js 会自动调用相应的钩子函数，从而让我们有机会执行一些自定义操作。
下面是在组件中定义相应钩子函数的代码：
-- -------------------- ---- -------
-------- -
-- --------
------------ -------- ---- -
---------------- - --
--
-- --------
------ -------- ---- ----- -
------------ - -------- - -- - --------- ---- ---
-------
-
-在这个示例中，我们使用了 Velocity.js 库来控制动画效果。在 beforeEnter 钩子函数中，我们将组件的不透明度设置为 0，从而让组件在插入时立即消失。
在 enter 钩子函数中，我们使用 Velocity.js 库来创建动画效果。具体来说，我们使用 Velocity 函数来控制透明度属性的变化，从 0 到 1。最后，我们调用 done 回调函数，在动画结束时清理组件。
列表过渡
除了组件插入和删除时的过渡效果外，Vue.js 还支持列表过渡效果，例如在一个列表中，插入或删除一项时，能够产生过渡效果。Vue.js 提供了两种方式实现列表过渡效果：使用 v-for 指令和使用动态组件。这里我们介绍 v-for 指令的方式。
<transition-group name="list" tag="ul">
<li v-for="(item, index) in items"
v-bind:key="item.id"
v-bind:class="{ 'highlight': item.highlighted }"
v-on:click="toggleHighlight(item)">
{{ item.text }}
</li>
</transition-group>在上面的示例中，我们使用 transition-group 组件包裹了一个列表项，并指定了列表项的 tag 属性。在组件中，我们使用 v-for 指令循环渲染列表项，并使用 v-bind:key 属性，为每一项列表项绑定一个唯一的标识符。
在列表项中，我们使用 v-bind:class 指令，根据列表项是否高亮来绑定不同的 CSS 类名。最后，我们使用 v-on:click 指令，绑定一个 toggleHighlight 方法，用于切换列表项的高亮状态。
关于列表项的过渡效果，我们将在样式中定义相应的 v-enter 和 v-leave 类名。
-- -------------------- ---- ------- ------------------- ------------------ - ----------- --- ---- - ------------ -------------- - -------- -- ---------- ------------------ - ------------------ - --------- --------- -
在这个示例中，我们定义了三个 transition 类名：list-enter、list-leave、list-leave-active。当列表项插入时，会触发 list-enter 和 list-enter-active 类名；当列表项删除时，会触发 list-leave 和 list-leave-active 类名。
总结
在本文中，我们介绍了 Vue.js 中使用 transition 实现动画效果的基础知识，并提供了具体的示例代码。通过这些示例代码，我们可以了解到：
- 如何定义 transition 组件，并指定触发动画的类名；
- 如何使用 v-if 和 v-show 指令，控制组件的插入和删除；
- 如何定义基本的 transition 类名，以及如何自定义钩子函数；
- 如何使用 transition-group 和 v-for 指令，实现列表过渡效果。
希望本文的内容对你有所帮助，如果你有任何问题或建议，欢迎在评论中与我们分享！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649db8e148841e9894a68aff