实现material风格按钮

1.material风格按钮

material风格按钮有个很好玩的特效，就是在点击按钮时，会有一个圆圈扩散的效果，看了几个组件库都用了这个效果，决定用CSS3加上原生js自己来实现以下

2.实现

html结构只需要内层一个用来装文本的容器，之后用js添加一个圆形遮罩层就行

<button class="btn">
    <div class="text">primary</div>
</button>

样式上则是用的CSS3动画，通过添加相应的动画类，配合transform将圆圈放大

.btn{
    position: relative;
    padding: 8px 16px;
    background-color: rgba(0, 188, 212,1);
    color: #fff;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    transition: background-color 200ms;
    cursor: pointer;
    overflow: hidden;

    &:hover{
        background-color: rgba(0, 188, 212,0.8);
    }

    .mask{
        position: absolute;
        border-radius: 100%;
        background-color: hsla(0,0%,100%,.45);
        transform: scale(0);
        z-index: 1;

        &.drop{
            animation: button-ripple linear 500ms;
        }
    }

    .text{
        position: relative;
        z-index: 2;
    }
}

@keyframes button-ripple{
    from{
        transform: scale(0);
        opacity: 1;
    }

    to{
        transform: scale(2);
        opacity: 0;
    }
}

• 因为需要找到点击的位置，这里就需要js来完成了，实现重复动画的思路是，通过删除遮罩层上的动画类，再添加上动画类
• 但是一开始直接删除后添加动画类，第二次点击并没有效果，可能浏览器在这里做了优化，将两次的操作合并了，所以最后想到异步执行后面的添加类操作，可以实现重复点击效果。

let btn=document.querySelector('.btn');
    
    btn.addEventListener('click',function(event){
        let mask=btn.querySelector('.mask');
        if(!mask){
            mask=document.createElement('div');
            mask.className='mask';
            mask.style.width=mask.style.height=Math.max(btn.offsetWidth,btn.offsetHeight)+'px';
            btn.appendChild(mask);
        }

        let left=event.clientX-btn.getBoundingClientRect().left-mask.offsetWidth/2+'px';
        let top=event.clientY-btn.getBoundingClientRect().top-mask.offsetHeight/2+'px';

        mask.classList.remove('drop');
        mask.style.left=left;
        mask.style.top=top;
        setTimeout(function(){
            mask.classList.add('drop');
        },0);
    });