在前端动画开发中，我们经常需要运用 CSS3 实现动画效果。但在实际操作过程中，经常会遇到异步的情况，例如当我们需要按顺序加载多个 CSS3 动画时，每个动画结束后，才能顺序执行下一个动画。这时就可以使用 Promise 来优化代码，实现更加灵活可控的动画效果。
Promise 的基本概念
Promise 是在 ES6 中加入的语言特性，它可以更好地管理异步数据，避免回调地狱，更加优雅地处理异步请求的结果。
Promise 表示一种异步操作的最终完成（或失败）及其结果值的表示。简单来说，Promise 就是一个容器，里面保存着未来才会结束的事件（通常是一个异步操作）的结果。
Promise 包含三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。一般情况下，异步操作成功后，Promise 会从进行中的状态变成已成功的状态，而失败则从进行中的状态变成已失败的状态。
Promise 在 CSS3 动画中的应用
在 CSS3 动画中使用 Promise 可以有效地解决顺序加载多个动画的问题。具体应用场景如下：
场景一：顺序加载多个 CSS3 动画
实际场景中，我们可能需要在一个元素上加载多个动画，而这些动画需要在前一个动画执行结束后才能执行。这时，我们就可以使用 Promise 实现顺序加载多个 CSS3 动画的效果。
以下是一个示例代码：
<div class="box"></div>
-- -------------------- ---- -------
---- -
------ ------
------- ------
----------------- ----
--------- ---------
------------------- ---
-------------------- ---------
-
----------- -
----- ------
--------------- -----------
-
----------- -
----- ----
--------------- -----------
-
---------- -
----- -----
--------------- ----------
-
---------- ---------- -
-- -
----- ------
-
---- -
----- -------- - ------
-
-
---------- ---------- -
-- -
----- ------
-
---- -
----- ----
-
-
---------- --------- -
-- -
----- ----
-
---- -
----- -----
-
--- -------------------- ---- -------
----- --- - -------------------------------
-------- -------------- -
------ --- ----------------- -- -
----------------------------
----- ----------- - -- -- -
--------------------------------------- -------------
-------------------------------
----------------------------
----- ----------- - -- -- -
--------------------------------------- -------------
-------------------------------
---------------------------
----- ---------- - -- -- -
--------------------------------------- ------------
------------------------------
----------
--
------------------------------------ ------------
--
------------------------------------ -------------
--
------------------------------------ -------------
---
-
--------------
-------- -- -----------------------在以上代码中，我们首先定义了一个 runAnimation 函数，它返回了一个 Promise 对象。在该函数中，我们按顺序执行了三个 CSS3 动画代码段，每个代码段均注册了 animationend 事件。当一个动画执行结束后，就会触发该事件，从而执行下一个动画。最后，我们在 Promise 的 resolve 函数中执行了回调，以便在动画执行完毕时执行相应的回调操作。
场景二：无限循环播放 CSS3 动画
在实际开发中，我们可能需要无限循环播放某个动画效果。这时，我们可以使用 Promise 来实现循环播放的效果。
以下是一个示例代码：
<div class="box"></div>
-- -------------------- ---- -------
---- -
------ ------
------- ------
----------------- ----
--------- ---------
------------------- ---
-------------------- ---------
-
--------- -
----- ----
---- ----
--------------- -----
-
---------- ---- -
-- -
----- --
---- --
-
--- -
----- -----
---- --
-
--- -
----- -----
---- -----
-
--- -
----- ------
---- -----
-
---- -
----- --
---- --
-
--- -------------------- ---- -------
----- --- - -------------------------------
-------- -------------- -
------ --- ----------------- -- -
--------------------------
----- --------- - -- -- -
--------------------------------------- -----------
-----------------------------
----------
--
------------------------------------ -----------
---
-
--------- ------ -
--------------
------------
-----在以上代码中，我们定义了一个 runAnimation 函数，该函数返回了一个 Promise 对象。在该函数中，我们加载了一个 CSS3 动画效果，并在动画执行完毕后将 Promise 的状态设置为 resolved。
在主函数中，我们使用了一个自执行函数，实现了无限循环播放动画效果。在循环中，我们首先加载动画效果，并在 Promise 对象状态变为 resolved 后，递归调用 loop 函数实现重复播放的效果。
总结
通过以上示例代码，我们可以看到使用 Promise 在 CSS3 动画中的应用与执行过程。在实际开发中，我们可以运用 Promise 实现更加灵活可控的动画效果，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca81595ad90b6d041b5817