看到越來越多的App都會在點擊的時候呈現(xiàn)一個漣漪的效果安寺，好奇是怎么實現(xiàn)的勺远。
效果
自己想了幾個方案，發(fā)現(xiàn)都不太好實現(xiàn)耙替。搜集了一些資料之后發(fā)現(xiàn)其實并不難亚侠，甚至也不需要jQuery。
先講講大體思路：
1俗扇，漣漪由按鈕內(nèi)的子元素去做硝烂，這個子元素脫離文檔流，故不改變按鈕內(nèi)容的布局
2铜幽，點擊按鈕時滞谢，把點擊坐標(biāo)記錄下來，作為漣漪的圓心
3除抛，創(chuàng)建漣漪子元素狮杨，設(shè)置好圓心
4，把它添加到按鈕里面去到忽，它被渲染進(jìn)DOM之后就會播放CSS動畫
5禾酱，設(shè)置 timeout，在動畫時長后把漣漪從按鈕里刪除
代碼：
HTML
<div class="btn">
<p>Button</p>
</div>
CSS
.btn {
width: 100px;
height: 50px;
background-color: green;
border-radius: 10px;
position: relative; /* 必須 */
overflow: hidden; /* 必須 */
}
.btn > p {
text-align: center;
}
.btn > span {
position: absolute; /* 必須 */
transform: translate(-50%, -50%); /* 必須 */
background: white;
border-radius: 50%;
animation: .75s ripple; /* 必須 */
}
@keyframes ripple {
from {
width: 0px;
height: 0px;
opacity: .5;
}
to {
width: 200px;
height: 200px;
opacity: 0;
}
}
JS
const btn = document.querySelector('.btn');
btn.addEventListener('mousedown', function(e){
const left = e.clientX - e.currentTarget.offsetLeft;
const top = e.clientY - e.currentTarget.offsetTop;
const rip = document.createElement('span');
rip.style.left = left + 'px';
rip.style.top = top + 'px';
btn.appendChild(rip);
setTimeout(()=>{rip.remove()}, 750);
})
