js 实现Material UI点击涟漪效果示例


Posted in Javascript onSeptember 23, 2022

正文

我个人而言还是挺喜欢Material UI这套设计风格的。一些细节方面做的还不错。就比如今天要给大家分享的点击涟漪效果。Material UI里面叫做Ripples。好了,话不多说,开始吧。

HTML

<div class="example">Click me</div>

CSS

.example {
    position: relative;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: #0000001a;
    animation: ripple 225ms cubic-bezier(0, 0, .2, 1) forwards;
    transform: scale3d(0, 0, 0);
    pointer-events: none;
}
@keyframes ripple {
    from {
        transform: scale3d(0, 0, 0);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

JS

const exampleEl = document.querySelector('.example');
// 移动端触发顺序 touchstart => touchend => mousemove => mousedown => mouseup => click
// 文档https://w3c.github.io/touch-events/#mouse-events
let rippleEl = null, startTime, isMouseup = false;
// touchstart
function handleTouchstart(e) {
    createRipple(e);
}
// touchend
function handleTouchend(e) {
    removeRipple(e);
    // 阻止mouse事件触发
    e.preventDefault();
}
// touchcancel
function handleTouchcancel(e) {
    removeRipple(e);
}
// mousedown
function handleMousedown(e) {
    // 避免mouseup,mouseleave重复执行
    isMouseup = false;
    createRipple(e);
}
// mouseup
function handleMouseup(e) {
    isMouseup = true;
    removeRipple(e);
}
// mouseleave
function handleMouseleave(e) {
    if (isMouseup || rippleEl === null) {
        return;
    }
    removeRipple(e)
}
// 创建ripple
function createRipple(e) {
    startTime = e.timeStamp;
    const current = { x: e.clientX, y: e.clientY }
    if (e.type === 'touchstart') {
        current.x = e.touches[0].clientX;
        current.y = e.touches[0].clientY;
    }
    const rect = exampleEl.getBoundingClientRect();
    const vertex = {
        nw: { x: rect.left, y: rect.top },
        ne: { x: rect.left + rect.width, y: rect.top },
        se: { x: rect.left + rect.width, y: rect.top + rect.height },
        sw: { x: rect.left, y: rect.top + rect.height }
    }
    let max = 0;
    for (const key in vertex) {
        // ripple半径
        const radius = getDistance({ x: current.x, y: current.y }, vertex[key]);
        max = Math.max(max, radius);
    }
    rippleEl = document.createElement('div');
    rippleEl.className = 'ripple';
    rippleEl.style.left = (current.x - rect.left - max) + 'px';
    rippleEl.style.top = (current.y - rect.top - max) + 'px';
    rippleEl.style.width = (max * 2) + 'px';
    rippleEl.style.height = (max * 2) + 'px';
    exampleEl.appendChild(rippleEl);
}
// 移除ripple
function removeRipple(e) {
    if (e.timeStamp - startTime > 225) {
        rippleEl.remove();
        rippleEl = null;
    } else {
        // 采用animation属性实现动画效果。相比transition的好处在于不用手动触发重绘
        rippleEl.addEventListener('animationend', function () {
            this.remove();
            if (this === rippleEl) {
                rippleEl = null;
            }
        });
    }
}
// 绑定事件
exampleEl.addEventListener('mousedown', handleMousedown);
exampleEl.addEventListener('mouseup', handleMouseup);
exampleEl.addEventListener('mouseleave', handleMouseleave);
exampleEl.addEventListener('touchstart', handleTouchstart);
exampleEl.addEventListener('touchend', handleTouchend);
exampleEl.addEventListener('touchcancel', handleTouchcancel);
/**
 * 获取两点间距离
 * @param {object} a 第一个点坐标
 * @param {object} b 第二个点坐标
 * @returns
 */
function getDistance(a, b) {
    const x = a.x - b.x;
    const y = a.y - b.y;
    return Math.hypot(x, y); // Math.sqrt(x * x + y * y);
}

实现效果 

js 实现Material UI点击涟漪效果示例

以上就是js 实现Material UI点击涟漪效果示例的详细内容,更多关于js Material UI点击涟漪效果的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 #Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
TS 类型兼容教程示例详解
Sep 23 #Javascript
TS 类型收窄教程示例详解
Sep 23 #Javascript
JavaScript实现简单的音乐播放器
Aug 14 #Javascript
You might like
一个简单计数器的源代码
2006/10/09 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python实现统计代码行数的方法
2015/05/22 Python
python杀死一个线程的方法
2015/09/06 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python实现在线翻译
2020/06/18 Python
白色公司:The White Company
2017/10/11 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
车队司机自我鉴定
2014/03/02 职场文书
实习生评语
2014/04/26 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL