前言
Vue.js 是一款流行的前端 MVVM 框架，它的核心是响应式数据绑定和组件化系统。在实际开发中，我们经常需要给页面元素添加动画效果来提升用户体验。Vue.js 提供了丰富的过渡动画 API，可以帮助我们轻松实现各种动画效果。
本文将介绍 Vue.js 中如何使用 transition 过渡动画，主要包括以下内容：
- transition 过渡的基本用法
- 多个元素同时过渡的用法
- 列表过渡的用法
- CSS 类名绑定的用法
transition 过渡的基本用法
Vue.js 中的 transition 过渡是指在元素插入或删除时，使用 CSS 过渡动画来平滑地过渡效果。我们可以通过 <transition> 元素来包裹需要过渡的元素，然后通过设置 name 属性指定过渡的名称：
-- -------------------- ---- -------
----------
-----
------- -------------------------------
----------- ------------
-- ------------------ -----------
-------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ------
--
--
-------- -
-------- -
--------- - -----------
--
--
--
---------
-------
-- ---- --
-------------------
------------------ -
----------- ------- -----
-
------------
-------------- -
-------- --
-
--------在上面的例子中，我们定义了一个 <button> 和一个使用了 <transition> 包裹的 <p> 元素，当点击按钮时，v-if 指令会根据逻辑值显示或隐藏 <p> 元素，同时使用 fade 名称定义了过渡的动画效果。在样式中，我们定义了一个淡入淡出的动画，当元素加入或离开界面时，会根据指定的 CSS 选择器实现动画效果。
多个元素同时过渡的用法
在某些场景下，我们需要同时给多个元素添加过渡效果，比如列表中每个元素进入或离开界面时都应该有对应的动画效果。我们可以使用 <transition-group> 来实现这个效果。
-- -------------------- ---- -------
----------
-----
------- -------------------------
----------------- ----------- ---------
--- ------------- ------ -- ------ ---------------
-- --------- --
------- --------------------------------------
-----
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
- --- -- ----- -------- --
- --- -- ----- --------- --
- --- -- ----- ------- --
--
------- --
--
--
-------- -
----- -
----------------- --- -------------- ----- -------- ---
--
------------- -
------------------------ ---
--
--
--
---------
-------
-------------------
------------------ -
----------- --- -----
-
------------
-------------- -
-------- --
---------- -----------------
-
--------在上面的例子中，我们使用了 <transition-group> 组件，并设置了 name 属性。组件中的元素需要使用 v-for 指令渲染，在每个元素上需要添加一个 :key 属性，用来标识每个元素。在样式中，我们定义了一个带有 translate 动画的向下进入和向上离开的效果。
列表过渡的用法
在实际开发中，经常需要添加一个列表，当列表的长度变化时，需要同时添加或移除多个元素。Vue.js 中的 <transition-group> 组件可以轻松实现这个效果。不同之处在于，我们需要使用 v-for 指令来重复渲染整个组件：
-- -------------------- ---- -------
----------
-----
------- -------------------------
------- -------------------------------
----------------- ----------- ---------
--- ------------- ------ -- --------------------- ---------------
-- --------- --
------- -----------------------------------------
-----
-------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -- --- -- ----- -------- ---
------- --
--
--
--------- -
---------------------- -
------ --------------------- -- --
--------
------- -----
----------------- --------- ----------
----------------- --------- ---------
----
--
--
-------- -
----- -
----------------- --- -------------- ----- --------- ---
--
-------- -
-----------------
--
---------------- -
------------------------ ---
--
--
--
---------
-------
-------------------
------------------ -
----------- --- -----
-
------------
-------------- -
-------- --
---------- -----------------
-
--------在上面的例子中，我们使用了计算属性 itemsWithTransitions，在每个元素上添加了 appear、enterActiveClass 和 leaveActiveClass 属性，用来控制列表中元素的进入和离开动画。当执行添加或移除操作时，Vue.js 会自动使用过渡动画来渲染列表元素。
CSS 类名绑定的用法
除了设置过渡效果的名称和动画效果外，Vue.js 也支持通过绑定 CSS 类名来实现过渡效果。我们可以使用 <transition> 或 <transition-group> 元素的 mode 属性来控制 CSS 类名的绑定方式。
-- -------------------- ---- -------
----------
-----
------- -------------------------------
----------- ----------- --------------
-- ----------- --------------------------- -----------
-------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ------
--
--
-------- -
-------- -
--------- - -----------
--
--
--
---------
-------
-- --------- --
-------------------
------------------ -
----------- ------- -----
-
----------- -
-------- --
-
-------------- -
-------- --
-
-- ---------- --
---------------------- -
----------- ------- -----
-
--------------- -
-------- --
-
---------------------- -
----------- ------- -----
-
------------------ -
-------- --
-
-- -- --- -- --
---------------------- - --------------
---------------------- - ------------- -
----------- --------- -----
-
--------------- - --------------
------------------ - ------------- -
---------- ------------------
-
--------在上面的例子中，我们在 <p> 元素上添加了一个 class 属性，然后在样式中定义了一个带有 translateX 动画的过渡效果。在 <transition> 元素中，我们使用了 mode 属性，out-in 表示先执行离开动画，再执行进入动画。在样式中，我们定义了一个带有 translateX 的过渡动画，它在两个 CSS 类名之间变化，使用了加号连接两个选择器。
总结
本文介绍了 Vue.js 中如何使用 transition 过渡动画，主要包括过渡的基本用法、多个元素同时过渡的用法、列表过渡的用法和 CSS 类名绑定的用法。通过对这些内容的学习，我们可以轻松实现各种动画效果，并提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e18bcaf6b2d6eab3cb848b