前言
在前端开发中，CSS 的动效处理非常重要，包括卡片点击涟漪效果、按钮点击涟漪效果等。这里介绍一种实现点击涟漪效果的方法，利用 Google Material Design 提供的一个 npm 包 @material/ripple。
@material/ripple 简介
@material/ripple 是一个基于 Material Design 点击涟漪效果的库，可以用于任意元素的涟漪动画效果。由于是基于 Material Design 制作的，效果视觉效果非常好，而且非常简单易用。
安装 @material/ripple
安装非常简单，使用以下命令即可：
--- ------- ----------------
安装完成后，即可在项目中使用 @material/ripple。
使用 @material/ripple
@material/ripple 的使用非常简单，以下是一个基本的示例：
------ - --------- - ---- ------------------- ----- ------ - -------------------------------------- ----- ------ - --- ------------------
上面的代码中，我们从 @material/ripple 中 import 了 MDCRipple，这是一个构造函数，用于创建一个涟漪对象。
然后利用 document.querySelector 获取一个指定的 DOM 元素，然后利用 MDCRipple 构造函数为这个元素创建一个涟漪对象。
@material/ripple 的 API
MDCRipple 的实例提供了很多实用的 API，包括：
- active: 布尔值，表示涟漪当前是否处于活动状态。
- unbounded: 布尔值，表示涟漪是否为无限的（Unbounded）。
- layout(): 重新计算元素的布局。
- Adapter: 适配器方法和属性，允许与主要框架和兼容 Material Design 规范的库进行交互。
展示效果
在页面中使用 button 标签结合 MDCRipple 构造一个按钮，并附上涟漪动画效果，如下示例代码：
------- ----------------- ------------------- ---- --------------------------------- ----- -------------------------------- ---- ------------- ---------
------ - --------- - ---- ------------------- ----- ------- - ----------------------------------------- ------------------------ -- - --- ------------------ ---
我们给按钮添加了 .mdc-button 和 .mdc-button--touch 样式类，并在 button 的内部添加了 mdc-button__ripple 和 mdc-button__label 元素，由于 click 事件总是等待一段时间才会释放，让用户等待并不友好，所以我们使用了 touch 事件。
设定了以上样式后，我们使用 MDCRipple 为所有 .mdc-button 添加涟漪效果。
总结
通过上面的实例代码，我们可以看到 @material/ripple 以及其所提供的丰富 API，采用简洁而面向对象的方式，让我们只要关注业务逻辑，不必太过关心 DOM 的处理，大大加快程序开发的效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/94522