近来想要在按钮上增加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>
