layui的anim参数支持0–6数字动画和特定字符串动画,数字值需传整数,字符串动画须配合offset生效,且不支持自定义时长或缓动函数。
直接用 anim 参数就能切换动画,但数字值和字符串值行为不同,不注意会白配。
anim 0–6 数字动画怎么选
Layui 内置的 anim:0 到 anim:6 是最常用的一组,每个数字对应一种固定动效,必须传整数,不能写成字符串(比如 "2"):
-
anim:0:默认平滑放大(适合普通提示) -
anim:1:从顶部掉落(适合系统通知类弹层) -
anim:2:从底部上滑(移动端表单操作推荐) -
anim:3:从左侧滑入(适合侧边抽屉式菜单) -
anim:4:从左翻滚(视觉冲击强,慎用于高频操作) -
anim:5:渐显(无位移,适合轻量提示) -
anim:6:抖动(常用于错误反馈,但需配合success回调加 class)
注意:anim 值只影响弹出/关闭时的过渡,不影响遮罩层(.layui-layer-shade)的淡入淡出——那是由 shade 控制的,两者独立。
2.8+ 版本新增的字符串动画(如 anim:'slideLeft')
新版支持字符串类型动画,但**必须配合边缘定位 offset 才能生效**,单独设 anim:'slideLeft' 且 offset 是默认居中,动画会退化为 anim:0:
-
offset:'rb'+anim:'slideRight'→ 右下角抽屉式从右滑入 -
offset:['10px','100%']+anim:'slideLeft'→ 贴右边界从右滑出(注意水平坐标是100%) - 不支持自定义持续时间或缓动函数,所有字符串动画时长固定约 300ms
常见误用:anim:'fadeIn' 并不存在,Layui 没有这个内置值;anim:'rotate' 同样无效——只认文档里明确列出的字符串,如 'slideLeft'、'slideRight'、'slideDown'、'slideUp'。
自定义动画要绕开 layer 的 DOM 插入时机
想加 CSS 动画(比如 shake、bounce),不能在 content 字符串里直接写 class,因为弹层 DOM 还没挂载到页面:
- 必须用
success回调获取真实 DOM:success: function(layero) { $(layero).find('.layui-layer-content').addClass('my-shake'); } - 动画结束后记得清理:
setTimeout(() => $(layero).find('.layui-layer-content').removeClass('my-shake'), 400); - 移动端慎用 transform 类动画(iOS Safari 容易卡顿),可加 UA 判断降级:
if (!/iPad|iPhone|iPod/.test(navigator.userAgent)) { /* 加动画 */ }
关键点在于:Layui 的动画系统是“开关式”的,它只控制入场/退场帧,中间过程完全交由你接管;一旦想干预中间状态(比如暂停、反向、循环),就得自己写 CSS 或 JS 控制,anim 参数就不管用了。











