简介
@polymer/neon-animation 是一个为 Web 组件提供深度的动画效果的 npm 包。它是 Polymer 的子项目之一，提供了许多常见的动画效果和可定制的选项。此外，它还支持列表动画、输入动画甚至路由动画等多种使用场景，为设计师和前端开发人员提供了更好的交互体验。
安装
使用 npm 安装：
--- ------- ------ -----------------------
基本用法
引入
先引入 LitElement 或者 Polymer 的相关部件，并且将 @polymer/neon-animation 与你的组件相关联：
------ - ----------- ----- --- - ---- --------------
------ - --------------------------- - ---- ------------------------------------------------------------
----- --------- ------- ---------- -
------ --- ------------ -
------ ---
-
------ --- -------- -
------ ----
-- ---
--
-
------ --- ------------ -
------ -
-- ------
--
-
-使用
在 static get animations() 方法中定义一个对象作为动画集合对象：
------ --- ------------ -
------ -
-------------------- -
-
----- -------------
------- -
------ ----
--------- ---
-
-
--
--------------------- -
-
----- --------------
------- -
--------- ---
-
-
-
--
-然后在你的组件 HTML 中调用：
---- ----------- --------------------------------
定义一个 toggle 方法来切换当前的动画，其中 this.animating 是用于记录当前是否正在运行动画：
-------- -
-- ----------------- -
----- --- - -----------------------------------------
----- --------------- - -
----- --------------------
----- ---
--
------------------------------------
-
---- -
-----------------------
-
-------------- - ----------------
-深入用法
主题
@polymer/neon-animation 支持主题。它们可用于自定义动画的文本颜色和其他组件。使用主题时，您可以轻松地应用默认样式。
创建主题
创建新主题：
----- --- - -----------------------------------------------
------------------------- -------
------------- - -
-------
------------------------------ -
---------------------------- --------
------------------------------ --------
-
--------
--
-------------------------------应用主题
在您的组件中应用主题：
-------------------- ---------- ------------ ------- ------- ------- ------- ------- ------- ----------------------
动画配置
@polymer/neon-animation 提供了大量的动画配置选项。可以使用它们来进行高度定制的动画。
定义专属动画
创建和注册您自己的动画：
----- ----------- - -
----- ---------------
-- -------------
---------- -
----- -
-------- --
---------- -------------------
--
--- -
-------- --
---------- -----------------
-
--
------- -
------ --
--------- ----
------- -------------
-
--
------------------------------------------------------- -------------对指定的元素播放动画
在 HTML 元素上播放动画：
---- ----------- ------------------------------ --------
绑定一个单击事件，调用 animate 方法：
--------- -
----- --- - -----------------------------------------
----- --------------- - -
----- ---------------
----- ---
--
------------------------------------
-实时监控
在实时网络连接和用户输入上实时监控动画：
------------------------------------------
----- ------------------------
----- ---
------- -
------ --
--------- ----
------- -------------
--
--------- -- -- -
-- ------------
-
---点击触发的动画
在用户单击元素时触发动画：
---- ---------------------------- -- -- -------------
调用 play 方法启动动画：
------ - --------------- ---- - ---- -------------------
------ ---------------------------------------------
------ - --------------------------- - ---- ------------------------------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
------ -------------------------
--- -
---------- -----
------ -----
----------------- --------
-------- -----
------- --------
-
--------
---- ------------------------ -- -- --------------
--
-
--------- -
----- --- - -------------------------------
------------------------------------------
----- -----------------------------
----- ----
------- - ------ -- --------- ----- ------- ------------- -
---
-
-
----------------------------------- -----------总结
使用 @polymer/neon-animation 包是非常方便的，它提供了许多动画库和可自定义的选项，可以应用于列表动画、输入动画或路由动画等多种场景，为 Web 组件的创建和设计带来了很大的帮助。在使用过程中，建议按照官方文档依次学习，并结合实际场景进行使用，可以提高工作效率，提高 Web 应用的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f759008a9b7065299ccbcdc