Web 前端开发者都知道，CSS 动画可以为网页添加生动、活泼的效果，让用户交互更流畅。而 Custom Elements 正是使得我们可以在网页中创建自定义组件的技术。然而，如何在 Custom Elements 中使用 CSS 动画呢？接下来，本文将为你详细解答。
什么是 Custom Elements？
在进入主题前，我们首先了解一下 Custom Elements 是什么。
Custom Elements 是 W3C 的标准之一，目的在于使 Web 开发者能够创建自定义元素。Web 应用程序通过使用自定义元素可以帮助我们创建更好的用户界面，而 CSS 动画为这些元素添加了更多的动态效果。
Custom Elements 允许开发者创建自己的 HTML 标记，它通过使用 JavaScript 和一些新的 DOM API 技术来实现。开发者可以在元素创建和销毁时添加自定义行为和事件监听器，使得开发者可以以更多的方式控制页面。
Custom Elements 的介绍结束，下面就是我们关心的问题：在 Custom Elements 中如何使用 CSS 动画？
CSS 动画事件
在开始编写我们的自定义元素时，有必要了解与 CSS 动画相关的事件。
动画开始事件：
animationstart
动画结束事件：
animationend
动画重复事件：
animationiteration
这些事件触发的顺序以及是否触发取决于我们如何设置 CSS 动画的 keyframes。
示例代码
我们来看下面的示例代码，它实现了一个自定义元素，并加入了 CSS 动画。点击元素时，会竖直地展开或收缩。
-- -------------------- ---- -------
---------------------------------
-------
-------------- -
-------- ------
------ -----
------- -----
----------------- --------
------ -----
----------- -------
------------ -----
---------- -----
------- --------
----------- --- ---- ------------
-
------------------- -
------- ------
-
---------- ------ -
-- - ------- ----- -
---- - ------- ------ -
-
---------- -------- -
-- - ------- ------ -
---- - ------- ----- -
-
----------------------- -
--------------- -------
-
------------------------ -
--------------- ---------
-
--------
--------
----- ------------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
-- --------------------------------- -
--------------------------------
----------------------------------
------------- -- -
------------------------------
-----------------------------------
-- -----
- ---- -
---------------------------
-------------------------------
-
---
-
-
---------------------------------------------- ---------------
---------在上面的示例代码中，我们的自定义元素默认高度为 50px，点击后可以变为 300px。
关于代码的解释：
首先，我们定义了一个 CustomElement 类来扩展 HTMLElement。
该类负责处理 Custom Elements 进行点击时的状态变化。当自定义元素被点击时，它会切换类名，并使用 setTimeout 方法来延迟移除类名，为动画切换留出时间。
接着，我们定义了两个 CSS keyframes，一个用于展开动画，另一个用于收缩动画。在展开元素时，我们添加 class 名称 'expanded'，并将样式动画命名为 expand。展开完成后，该类名被移除。
对于关闭元素操作，和展开元素的操作类似，类名 'collapsed' 会添加到自定义元素中，并移除 'open' 和 'expanded'。
在 CSS 中，我们首先指定了自定义元素的样式，如背景颜色、字体等。我们还定义了展开和收缩动画的初始状态和最终状态，这些在上面定义了。
最后，我们定义了自定义元素的样式，用 animation-name 属性设置动画名称。expanded 和 collapsed 类的使用使得展开和关闭动画可以分别在相应的回调中使用。
总结
在 Custom Elements 中使用 CSS 动画可以为自定义组件增色不少。本文介绍了在 Custom Elements 中使用 CSS 动画的步骤，以及CSS 动画中的事件。我们完成了一个示例，它可以让元素被点击时从 50px 改变为 300px，带有 CSS 动画。在本文中，你获得了在 Custom Elements 中使用 CSS 动画的基础知识和技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487d17648841e989465d412