原生js+css 实现 material design 点击效果

最近想要在按钮上添加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,当水波纹被覆盖时，可以使用此参数

实现思路

1. 获取指定class 的element，并添加点击事件监听
2. 为每一个element创建一个子元素<div class='wrapper'>.用来存放<span>
3. element点击时 创建animation需要的<span>、添加动画样式、添加 animationend 事件监听，在动画结束后移除 相关样式。
4. 多次点击时，创建多个<span>用来实现多个水波纹,并且对<span>重复使用。
5. 当最后一个动画结束时，并且鼠标从element移除时，删除多个<span>