项目作者: zhangyu1818

项目描述 :
click wave effect
高级语言: TypeScript
项目地址: git://github.com/zhangyu1818/wave-effect.git
创建时间: 2021-05-09T08:17:12Z
项目社区:https://github.com/zhangyu1818/wave-effect

开源协议:

下载


wave-effect

npm-version
codecov
bundlesize-js-image

click wave effect with CSS animation.

Install

  1. npm install wave-effect
  1. yarn add wave-effect

Usage

  1. import wave,{ clearEffect } from 'wave-effect'
  2. import 'wave-effect/dist/wave.css'
  3. const button = document.getElementById("button")
  4. wave(button)
  5. // clear effect
  6. clearEffect(button)

API

  1. wave(element: Element, options?: WaveOptions)

WaveOptions

  1. interface WaveOptions {
  2. // current wave effect color
  3. waveColor?: string
  4. // if element includes these className, click doesn't trigger effect
  5. disabledClass?: string[]
  6. }

Customize Style

you can override less variables to customize style.

  1. @import "~wave-effect/src/wave.less";
  2. @wave-color: red;
  3. @wave-animation-width: 20px;

or use css variables.

  1. :root {
  2. --wave-shadow-color: red;
  3. --wave-animation-width: 20px;
  4. }

Licence

MIT