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