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

特效实现

浏览数:1,449

2017-6-30

最近想要在按钮上添加material design的点击效果,看了看muse-ui,单纯的想要这种效果,而要引入一些不必要的内容觉得不划算,然后自己动手造了个轮子。
项目地址:github

效果预览
button

Import using script tag



使用


    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>

下载

本地下载

原文地址:https://segmentfault.com/a/1190000009779958