最近想要在按钮上添加material design的点击效果，看了看muse-ui，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。
项目地址：github
上传不了gif图只能用 JSFiddle了： JSFiddle效果
Import using script tag
<link rel="stylesheet" href="./ripple.css" charset="utf-8">
<script src="./ripple.js"></script>使用
<button class="md-button">文字</button> new Ripple({
cName: 'md-button',
color: 'red',
time: '0.5s',
MaxNum: 5
})
只要在<button>内添加 class=’className’ 并且在 Ripple()内传入{cName: ‘className’},便可以实现水波纹效果。<button> 的position将会被设置为relative
配置参数
| Option | Description |
|---|---|
| cName | element的className，默认为 “md-button” |
| r | 水波纹最小半径，不传此参数则为自动计算 |
| color | 水波纹颜色 默认为：rgba(0, 0, 0, 0.3) |
| time | animation的时间 默认为：0.5s |
| MaxNum | 水波纹的最大数量 默认为：5 |
| center | 水波纹的圆心。默认为：false |
| zIndex | 设置z-index 默认为：null,当水波纹被覆盖时，可以使用此参数 |
实现思路
- 获取指定class 的element，并添加点击事件监听
- 为每一个element创建一个子元素<div class=’wrapper’>.用来存放<span>
- element点击时 创建animation需要的<span>、添加动画样式、添加 animationend 事件监听，在动画结束后移除 相关样式。
- 多次点击时，创建多个<span>用来实现多个水波纹,并且对<span>重复使用。
- 当最后一个动画结束时，并且鼠标从element移除时，删除多个<span>
