在 Vue.js 中，transition 组件可以帮助我们实现元素的过渡效果（如淡入淡出、滑动等），让页面更加动态化和生动有趣。本文将介绍如何使用 Vue.js 中的 transition 组件实现过渡动画效果。
基本使用方法
Vue.js 的 transition 组件需要包裹需要进行过渡效果的元素，并且需要添加 name 属性，指定过渡效果的名称。
<transition name="fade"> <p v-if="show">Hello, Vue.js!</p> </transition>
在上面的代码中，当 show 属性的值为 true 时，p 元素会从无到有地淡入页面，当 show 属性的值为 false 时，p 元素会从有到无地淡出页面。注意：以下代码中所有的示例代码都是基于这个基本代码编写的。
过渡的 CSS 类名
transition 组件提供了下列的 CSS 类名，用于描述过渡的状态：
v-enter：进入状态的元素在插入之前添加此类名，在插入之后，移除此类名。v-enter-active：进入状态的元素同时也带有此类名。v-enter-to：进入状态的元素被插入之后立即添加此类名，并于动画/过渡完成时移除。v-leave：离开状态的元素在触发离开之前添加此类名（然而 v-leave-btn，v-leave-to 和 v-leave-active 在会立即被设置）。v-leave-active：离开状态的元素同时也带有此类名。v-leave-to：离开状态的元素被移除之前立即添加此类名，并于动画/过渡完成时移除。
可以使用这些类名结合 CSS3 的 transition 和 animation 属性来实现各种过渡效果，例如下面这个淡入淡出的例子：
-- -------------------- ---- ------- -- -------- -- ------------------- ------------------ - ----------- ------- ---- --------- ---- - -- ----------- ----- ----- -- ----------- - -------- -- ---------- ------------------ - -- ------ ------ ----- ----- - -- ------------------ - -------- -- ---------- -------------- - -- ------ -- ----- ----- ---- -- -------------- - -------- -- ---------- ----------------- -
自定义 CSS 类名
如果你想更改过渡与动画的 CSS 类名，你可以使用 transition 组件的 appear、enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class、leave-to-class 等属性来实现，例如：
<transition name="fade" enter-active-class="my-enter-active-class" leave-active-class="my-leave-active-class" > <p v-if="show">Hello, Vue.js!</p> </transition>
CSS 组合过渡效果
使用 name 属性为 transition 组件命名，多个 transition 组件可以指定同一个名称从而创建组合效果。在组合效果中，例如多个不同元素的淡入淡出会混在一起产生不一致的效果。因此我们建议同时在 name 属性中指定不同模式的名称。
<transition name="fade">
<button @click="show = !show">{{ show ? 'Hide' : 'Show' }}</button>
<hr>
<transition name="slide">
<p v-if="show">Hello, Vue.js!</p>
</transition>
</transition>上面的代码中，我们使用 fade 和 slide 两个名称分别描述 button 元素和 p 元素的过渡效果，从而实现组合效果。
JS 钩子函数
使用 transition组件还可以使用 JS 钩子函数，这些函数提供了更高级的自定义事件控制。它们有以下几个不同的钩子：
before-enter(el)：在进入动画之前执行 (可选)enter(el, done)：进入动画时执行 (可选)after-enter(el)：进入动画结束后执行 (可选)enter-cancelled(el)：进入动画取消时执行 (可选)before-leave(el)：离开动画之前执行 (可选)leave(el, done)：离开动画时执行 (可选)after-leave(el)：离开动画结束后执行 (可选)leave-cancelled(el)：离开动画取消时执行 (可选)
需要注意的是，这些函数的第一个参数 el 代表当前元素。而 enter()、leave() 函数会提供一个 done 函数作为参数，用于通知 transition 组件动画或过渡完成。
-- -------------------- ---- ------- ----------- ----------- --------------------------- -------------- ------------------------- --------------------------------- --------------------------- -------------- ------------------------- --------------------------------- - -- ------------------ ----------- -------------
在上面的代码中，我们为 transition 组件绑定了 beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave、leaveCancelled 这些函数。
-- -------------------- ---- -------
-------- -
------------ -------- ---- -
---------------------------
--
------ -------- ---- ----- -
---------------------
-------
--
----------- -------- ---- -
--------------------------
--
--------------- -------- ---- -
------------------------------
--
------------ -------- ---- -
---------------------------
--
------ -------- ---- ----- -
---------------------
-------
--
----------- -------- ---- -
--------------------------
--
--------------- -------- ---- -
------------------------------
-
-在 JavaScript 中，我们编写了 beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave、leaveCancelled 这些函数，并打印出了它们的状态。
总结
本文介绍了 Vue.js 中使用 transition 组件实现过渡动画效果的基本用法，以及一些高级的自定义方式，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65001a0c95b1f8cacde4de81