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

09-21 27阅读 0评论

正文

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

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:Goliszhou@gmail.com
$

发表评论

表情:
评论列表 (暂无评论,27人围观)

还没有评论,来说两句吧...