在 Web 前端中，我们经常需要使用动画来增加页面的交互性和可视化效果。而 Vue.js 作为一款流行的前端框架，也提供了多种使用 CSS 动画的方法。本文将介绍 Vue.js 中使用 CSS 动画的基本方法以及一些高级技巧，并提供示例代码和实际运用场景。
基本方法
Vue.js 提供了 transition 组件和 transition-group 组件来实现 CSS 动画。我们可以在组件的入场、离场和更新过程中使用这些组件来实现各种动画效果。
transition 组件
transition 组件是用于单个元素的 CSS 动画。我们可以在该组件中使用 name 属性来指定动画名称，然后在 CSS 样式中定义该名称对应的动画效果。当元素从未出现状态变成已出现状态、状态变化结束时，该组件会自动触发动画。
下面的示例展示了如何使用 transition 组件实现一个渐入渐出的效果：
-- -------------------- ---- ------- ---------- ----- ------- ------------ - --------- ---- - ------ - ------ ----------- ----------- ------------ -- ------------------ ----------- ------------- ------ ----------- -------- ------ ------- - ------ - ------ - ----- ----- - - - --------- ------- ------------------- ------------------ - ----------- ------- ---- --------- - ------------ -------------- - -------- -- - --------展开代码
在上面的代码中，我们使用 transition 组件包裹了一个 p 元素，并在组件上设置了 name 属性为 "fade"。接着，在 style 中定义了 "fade-enter-active" 和 "fade-leave-active" 类，它们包含了动画的过渡效果，比如淡入淡出效果。然后，我们还定义了 "fade-enter" 和 "fade-leave-to" 类，它们包含了动画的初始状态和结束状态，比如元素从 opacity: 0 变为 opacity: 1。最后，我们在 p 元素上使用 v-if 控制元素的显示和隐藏。
transition-group 组件
transition-group 组件是用于在一组元素间切换的 CSS 动画。和 transition 组件类似，我们也可以在 transition-group 组件中使用 name 属性来指定动画名称，并在 CSS 样式中定义该名称对应的动画效果。不同的是，transition-group 组件会自动为从列表中删除的元素添加离场动画，并为新加入的元素添加入场动画。
下面的示例展示了如何使用 transition-group 组件实现一个列表项的淡入淡出效果：
-- -------------------- ---- ------- ---------- ----- ------- -------------------- ------------- ------- -------------------------- ------------- ----------------- ------------ ---- ------------- ------ -- ------ ------------- -- ---- -- ------ ------------------- ------ ----------- -------- ------ ------- - ------ - ------ - ------ --- -- -- - -- -------- - --------- - ------------------------------ -- ------------ - ----------------------------------- - -- -- - - - --------- ------- ------------------- ------------------ - ----------- ------- ---- --------- - ------------ -------------- - -------- -- - --------展开代码
在上面的代码中，我们定义了一个数组 items，其中包含了初始的三个元素。然后，我们在 template 中使用了两个按钮，一个用来添加元素，一个用来删除元素。最后，我们使用 transition-group 组件包裹了一个 div 元素，并在组件上设置了 name 属性为 "fade"。接着，在 style 中定义了 "fade-enter-active" 和 "fade-leave-active" 类，同样包含了淡入淡出效果的过渡效果。然后，我们还定义了 "fade-enter" 和 "fade-leave-to" 类，和 transition 组件相似，包含了动画的初始状态和结束状态。最后，我们使用 v-for 循环渲染数组 items 中的元素，并为它们设置了 :key 属性，让 Vue.js 能够更好地追踪每个元素的状态变化。
高级技巧
除了基本的 transition 和 transition-group 组件之外，Vue.js 还提供了一些高级技巧，使我们能够更加精细地控制动画效果。
在组件中使用 transition 和 transition-group 组件
在组件中使用 transition 和 transition-group 组件同样非常方便。我们只需在组件的模板中使用以上组件，并给它们传递需要动画的内容或者 props。下面的示例展示了在 MyComponent 组件中使用 transition 组件实现一个动态消息提示的效果：
-- -------------------- ---- ------- ---------- ----- ------- ------------------ ---------------- ----------- ------------ -- --------------------- ------- ------ ------------- ------ ----------- -------- ------ ------- - ------ - ------ - ------------ ------ -------- -- - -- -------- - ------ - ---------------- - ---- ------------ - ------- -------- ------------- -- - ---------------- - ----- -- ----- - - - --------- ------- ------------------- ------------------ - ----------- ------- ---- --------- - ------------ -------------- - -------- -- - --------展开代码
在上面的代码中，我们定义了一个名为 MyComponent 的组件，并在模板中使用了 transition 组件包裹了一个 p 元素，然后使用了 v-if 指令来动态地渲染该元素。接着，在组件的 data 中定义了 showMessage 和 message 两个变量，让我们能够控制元素的显示和隐藏以及元素中的内容。最后，我们定义了一个 show 方法，它会在用户点击 Show Message 按钮时，设置 message 的值并在 2 秒钟后消失。
动态绑定动画名称
在默认情况下，transition 和 transition-group 组件的 name 属性只能绑定静态名称。如果我们需要动态绑定动画名称，可以使用 v-bind 或者简写形式 : 来实现。下面的示例展示了如何动态绑定一个元素的动画名称：
-- -------------------- ---- ------- ---------- ----- ------- ------------ - --------- ---- - ------ - ------ ----------- ----------- ----------- - ------------ - ------------ -- ------------------ ----------- ------------- ------ ----------- -------- ------ ------- - ------ - ------ - ----- ----- - - - --------- ------- ------------------------- ---------------------- - ----------- --- ---- --------- - ------------------ ------------------ - ---------- ------------------ - --------展开代码
在上面的代码中，我们使用了 v-bind 来动态地绑定了 transition 的 name 属性。该属性根据 show 变量来决定其值是 'slide-down' 还是 'slide-up'。接着，在 style 中定义了两个类名，用于动态改变效果。最后，在 p 元素上使用了 v-if 来动态渲染元素。
使用钩子函数
钩子函数是在动画过渡期间触发的回调函数。Vue.js 提供了很多钩子函数，比如 before-enter、enter、before-leave、leave 等等。我们可以使用这些钩子函数来更加精细地控制元素的动画效果。下面是一个使用 before-enter 和 enter 钩子函数的示例代码：
-- -------------------- ---- ------- ---------- ----- ------- ------------ - --------- ---- - ------ - ------ ----------- ----------- ------------- -- ----------- -------------------- ----------- ------------- ------ ----------- -------- ------ ------- - ------ - ------ - ----- ---- - -- -------- - ------ - --------- - ----- - - - --------- ------- -------------------- ------------------- - ----------- --- -- --------- - ------------- --------------- - ---------- ------------------ -------- -- - --------展开代码
在上面的代码中，我们使用了 before-enter 和 enter 钩子函数来实现一个从底部上升的效果。before-enter 钩子函数在元素插入之前触发，我们在这个钩子函数中将元素的初始位置设为离屏状态。enter 钩子函数在元素插入之后触发，我们在这个钩子函数中将元素移回原位，并添加了渐变效果。最后，我们在 p 元素上添加了点击事件，当用户点击元素时就会触发 hide 方法，元素将离场。注意，在 style 中，我们添加了两个类名分别为 slide-enter 和 slide-leave-to，这两个类名分别对应了 before-enter 和 enter 钩子函数的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b93424306f20b3a676b04b
