抖动特效必须在弹层 dom 插入文档后操作,通过 layer.open() 的 success 回调获取已渲染 dom 并添加 shake 类,400ms 后移除;需按 type 区分抖动目标节点,移动端应禁用抖动并改用轻量视觉反馈。
抖动特效必须在弹层 dom 插入文档后操作,直接在 layer.open() 调用后加 class 无效——因为此时元素还没挂到 document 上。
抖动目标要分 type 区分处理
不同 type 的弹层,内容容器位置不同,抖动的 DOM 节点也得跟着变:
-
type: 0(信息框)、type: 3(加载层):抖动区域是.layui-layer-content -
type: 1(页面层):如果content是 HTML 字符串,仍抖.layui-layer-content;但如果传的是 DOM 元素(比如content: document.getElementById('myForm')),则要抖该 DOM 自身,而不是默认 content 区 -
type: 2(iframe 层):抖动目标是 iframe 的body或你注入的容器,不能抖外层.layui-layer-content,否则白抖
必须用 success 回调 + 定时移除 class
success 是唯一能确保 DOM 已渲染、可操作的时机。抖动动画靠 CSS class 实现,但 class 不清理会干扰后续交互(比如用户重复点击同一按钮,抖动叠加或卡住):
- 在
success(dom)里用dom.querySelector('.layui-layer-content')或$(dom).find('.layui-layer-content')拿到目标节点 - 立即添加抖动 class,例如
shake - 用
setTimeout(() => node.classList.remove('shake'), 400)移除,400ms 对应常见 CSS 动画时长(如animation: shake 0.4s) - 不要用
transitionend监听——layer 内部可能复用 DOM,事件监听易丢失或错绑
移动端必须禁用抖动
iOS Safari 和多数安卓 WebView 对频繁 transform 动画优化极差,抖动容易卡顿、掉帧,极端情况触发页面闪退:
- 加一层 UA 判断:
if (!/iPad|iPhone|iPod|Android/.test(navigator.userAgent)) { /* 执行抖动 */ } - 更稳妥的做法是统一关掉,改用视觉反馈替代:比如按钮点击后短暂高亮、文字变色,或弹层标题加个轻微
scale(1.02)后立刻恢复 - 别依赖第三方动画库(如 Animate.css),layer 自身无依赖,引入额外 JS 会增大首屏压力
真正容易被忽略的点是:抖动不是为了炫技,而是给用户「操作已被接收」的即时反馈。如果后端响应慢、接口卡住,抖动反而放大焦虑——这时候不如去掉抖动,改用 layer.load() 显式告知「正在处理」。











