npm 包 @material/ripple 使用教程

前言

在前端开发中，CSS 的动效处理非常重要，包括卡片点击涟漪效果、按钮点击涟漪效果等。这里介绍一种实现点击涟漪效果的方法，利用 Google Material Design 提供的一个 npm 包 @material/ripple。

@material/ripple 简介

@material/ripple 是一个基于 Material Design 点击涟漪效果的库，可以用于任意元素的涟漪动画效果。由于是基于 Material Design 制作的，效果视觉效果非常好，而且非常简单易用。

安装 @material/ripple

安装非常简单，使用以下命令即可：

npm install @material/ripple

安装完成后，即可在项目中使用 @material/ripple。

使用 @material/ripple

@material/ripple 的使用非常简单，以下是一个基本的示例：

import { MDCRipple } from '@material/ripple';

const button = document.querySelector('.mdc-button');
const ripple = new MDCRipple(button);

上面的代码中，我们从 @material/ripple 中 import 了 MDCRipple，这是一个构造函数，用于创建一个涟漪对象。

然后利用 document.querySelector 获取一个指定的 DOM 元素，然后利用 MDCRipple 构造函数为这个元素创建一个涟漪对象。

@material/ripple 的 API

MDCRipple 的实例提供了很多实用的 API，包括：

• active: 布尔值，表示涟漪当前是否处于活动状态。
• unbounded: 布尔值，表示涟漪是否为无限的（Unbounded）。
• layout(): 重新计算元素的布局。
• Adapter: 适配器方法和属性，允许与主要框架和兼容 Material Design 规范的库进行交互。

展示效果

在页面中使用 button 标签结合 MDCRipple 构造一个按钮，并附上涟漪动画效果，如下示例代码：

<button class="mdc-button mdc-button--touch">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Button with Ripple</span>
</button>

import { MDCRipple } from '@material/ripple';

const buttons = document.querySelectorAll('.mdc-button');
buttons.forEach((button) => {
  new MDCRipple(button);
});

我们给按钮添加了 .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