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

 更新时间:2022年09月21日 11:18:57   作者:名字起太长会有傻子跟着念  
这篇文章主要为大家介绍了js 实现Material UI点击涟漪效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

我个人而言还是挺喜欢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点击涟漪效果的资料请关注脚本之家其它相关文章!

相关文章

  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    这篇文章主要向大家介绍的是在面试JS过程中,面试官常常问的几种类型,算法题、涉及js原理的题以及ajax请求等等,刚兴趣的小伙伴请参考下面文章的具体内容
    2021-09-09
  • svgicon组件使用方法示例详解

    svgicon组件使用方法示例详解

    这篇文章主要为大家介绍了svgicon组件使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    这篇文章主要介绍了微信小程序中button组件的边框设置的实例详解的相关资料,希望通过本文大家能够掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    这篇文章主要介绍了详解微信小程序Radio选中样式切换的相关资料,需要的朋友可以参考下
    2017-07-07
  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    这篇文章主要介绍了JavaScript构造函数与JavaScript原型,构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用,构造函数通过原型分配的函数是所有对象所共享的。下面来看看文章的集体介绍内容吧
    2021-12-12
  • 微信小程序 教程之注册程序

    微信小程序 教程之注册程序

    这篇文章主要介绍了微信小程序 教程之注册程序的相关资料,需要的朋友可以参考下
    2016-10-10
  • Js视频播放器插件Video.js使用方法详解

    Js视频播放器插件Video.js使用方法详解

    Video.js 是一个通用的在网页上嵌入视频播放器的JS库,Video.js自动检测浏览器对HTML5的支持情况,如果不支持HTML5则自动使用Flash 播放器,推荐大家好好看看
    2020-02-02
  • JavaScript专题之underscore防抖实例学习

    JavaScript专题之underscore防抖实例学习

    这篇文章主要为大家介绍了JavaScript专题之underscore防抖实例学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 微信小程序(十六)form组件详细介绍

    微信小程序(十六)form组件详细介绍

    这篇文章主要介绍了微信小程序form组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • JS作用域作用链及this使用原理详解

    JS作用域作用链及this使用原理详解

    这篇文章主要为大家介绍了JS作用域作用链及this使用原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论