原生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>