介绍
在前端开发中，纸片飞溅效果是一个很常见的交互设计，用于用户舒适体验。 @npm-polymer/paper-ripple 是一个用于创建 Material Design 触摸涟漪效果的 Polymer 组件。
安装
使用 npm 可以很方便地安装 @npm-polymer/paper-ripple，只需要在终端中运行下面的命令即可：
npm install --save @npm-polymer/paper-ripple
使用
引入 components
您可以在您的 HTML 文件中引入 Polymer 的 components：
<script type="module" src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script> <link rel="import" href="./node_modules/@npm-polymer/paper-ripple/paper-ripple.html">
用法
现在，您可以在您的 HTML 文件中使用 @npm-polymer/paper-ripple 组件。 您只需在需要的 DOM 元素上添加 paper-ripple 属性就能激活触摸涟漪效果。 下面是一个简单的示例：
<button paper-ripple>Click Me</button>
属性
@npm-polymer/paper-ripple 组件具有以下属性：
recenters
- 类型：Boolean
- 默认值：false
- 描述：在中心点创建涟漪
center
- 类型：Boolean
- 默认值：false
- 描述：在元素中心创建涟漪
initialOpacity
- 类型：Number
- 默认值：0.25
- 描述：涟漪的初始透明度
opacityDecayVelocity
- 类型：Number
- 默认值：0.8
- 描述：涟漪的透明度衰减速度
target
- 类型：HTMLElement
- 默认值：this
- 描述：涟漪的目标元素
ariaLabel
- 类型：String
- 默认值：""
- 描述：ARIA 标签
事件
@npm-polymer/paper-ripple 组件具有以下事件：
ripple-end
- 描述：当涟漪动画结束时触发，传递包含结束时间的事件对象。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ------------
------- ------------- -------------------------------------------------------------------------------------
----- ------------ ------------------------------------------------------------------
-------
------ -
----------------- -----
------ ------
-------- ---- -----
-------------- -----
------- -----
------- --------
---------- -----
------------ -----
----------- -----
-
--------
-------
------
------- ------------------ -----------
--------
----- ------ - ---------------------------------
-------------------------------- ---------- -
-----------------------
---
------------------------------------- --------------- -
------------------- --------- --------- ------------------
---
---------
-------
-------在这个示例中，我们引入了 @webcomponents/webcomponentsjs 和 @npm-polymer/paper-ripple，创建了一个带有 paper-ripple 属性的按钮，并监听 "ripple-end" 事件。 您可以在控制台中查看在该示例中的按钮上单击时的响应。
结论
@npm-polymer/paper-ripple 组件是创建 Material Design 触摸涟漪效果的一个优秀工具。 我们可以通过安装和使用 npm 包，轻松地实现该组件，并在我们的项目中受益。 本文中所提供的示例代码和详细的使用说明可以帮助您更好地理解 @npm-polymer/paper-ripple 组件并使用它来改善用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddb93