前端开发中，动画效果是很重要的一部分，它可以提升用户体验，更好地展现页面信息。LESS 是一款 CSS 预处理器，除了优化 CSS 代码外，它还可以实现更方便的动画定制。
本文将讲解如何在 LESS 中自定义动画，并通过示例代码来说明。
LESS 中定义动画
LESS 中定义动画，可以使用两种方式：
1. @keyframes 关键字
@keyframes 是 CSS3 中新增的动画规则，在 LESS 中同样支持。
定义 @keyframes 时，我们需要给它一个名称，然后在其中定义动画效果。
示例代码如下：
-- -------------------- ---- -------
-------- -
---------- ----------- -- ---------
-
---------- ----------- -
-- -
-------- --
-
--- -
-------- ----
-
---- -
-------- --
-
-上述代码定义了名为 myanimation 的动画，并将其添加到 .animate 类中。在执行动画时，myanimation 将在 3 秒时间内循环执行，始终保持可见状态。在 myanimation 中，定义了从透明度 0 到透明度 1 的过渡效果，且从开始到一半时间内从 0.5 的透明度返回。
2. transition 函数
除了使用 @keyframes 关键字，我们还可以使用 CSS3 中的 transition 函数来定义动画效果。transition 函数允许我们指定不同的属性在不同的时间段内发生变化，并可以在变化发生时添加不同的转换效果。
示例代码如下：
.animate {
transition: all 1s ease-out;
}
.animate:hover {
transform: scale(1.2);
opacity: 0.8;
}上述代码定义了一个类名为 .animate 的元素，在元素上使用了 transition 函数，并指定了所有属性在 1 秒内由初始状态转换到另一状态时使用 ease-out 转换效果。随后，在 .animate:hover 中定义了当鼠标悬停在标记上时，执行一个变形和透明度变化的效果。
LESS 中自定义动画
除了使用 CSS3 新增的规则和函数，LESS 还允许我们通过自定义变量、函数、Mixin 来自定义动画的效果。
1. 自定义变量
变量是 LESS 中常用的功能，通过变量，我们可以定义一组固定不变的值，方便后面调用。在定义动画时，我们可以将动画中的数值、颜色等固定值定义成变量，方便在后期维护和修改。
示例代码如下：
-- -------------------- ---- -------
------- ---
--------- ----
-------- -
---------- ----------- ------ ---------
-
---------- ----------- -
-- -
-------- --
-
--- -
-------- ---------
-
---- -
-------- --
-
-上述代码中，我们定义了 @speed 和 @opacity 两个变量，分别代表动画时间和透明度。在 .animate 中，我们将 @speed 作为动画时间参数，myanimation 则按照 @keyframes 规则中定义的值执行动画，而 @opacity 则作为过渡时所需要的透明度。
2. 自定义函数
函数是 LESS 中比较高级的功能，通过函数，我们可以定义一段可重用的代码，将其传递为参数并返回处理结果。在定义动画时，我们可以编写一些函数来处理动画效果中固定的转换方式，如缓动、倍数等。
示例代码如下：
-- -------------------- ---- -------
----------- -
----------- --- -- ------------------- ------ ------ -------
-
--------- -
------------
------- -
---------- -----------
-------- ----
-
-
--------- -
------------
------- -
---------- -----------
-------- ----
-
-上述代码中，我们编写了一个名为 .easeIn 的函数，它接收一个 @t 参数并返回包含缓动函数的过渡效果。通过调用该函数，我们可以为 .animate1 和 .animate2 添加类似的效果，并通过 &:hover 实现鼠标悬停时的动画效果。
3. 自定义 Mixin
除了函数，我们还可以使用 Mixin 来定义动画效果。在 LESS 中，Mixin 相当于一组 CSS 属性的整合，并可以被多次调用和继承。
示例代码如下：
-- -------------------- ---- -------
------------------ -
------- -
------- --
---------- -------------------
----- ------
------ --
------ ----
---------- -
------- --
----- ------
------ --
-
----------- --------- - ----- - ------- - ------
--- --
---- ---
----------- ---- ---- --- -- -------
--- --- - ----- - ------- - ----- - ------- - ---------- - ----- - -----
---- ---- ---- --- - ------ - ---- - ------
----------- --- - ---
-
----------- ----
--------------- -------------------
-------------------------- ------------
------------------- ---
-------------------- ---------
-------------------------- --
-------------------- -------
--------------------- --------
---------- ------------------- -
-- -
---------- -----
-
---
---- -
---------- ----------------
-
-
-
-
----------------- -
--------- ---------
--------------
-
----------------- -
--------- ---------
-------------
-
----------------- -
--------- ---------
-----------------
-上述代码中，我们定义了一个名为 .slide 的 Mixin，它接收一个方向参数，并根据指定的方向生成动画效果。通过 .genarateAn 函数，我们可以在 Mixin 中生成包含所有状态的动画效果，并将其添加到 slide-right 、 slide-left 和 slide-vertical 中。随后，我们使用 animation 相关属性将生成的动态转换效果应用到标记上。
总结
通过本文的讲解，我们了解了如何在 LESS 中定义和自定义动画效果，并详细讲解了如何使用变量、函数和 Mixin 实现自定义动画。掌握 LESS 的动画效果，可以让我们更加快速和方便地开发出具有良好用户体验的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648930f948841e989477f93b