Layui中实现右侧滑出抽屉层需自定义CSS动画与DOM操作，不可直接用layer.open默认配置；须在body末尾添加唯一id="drawer-layer"容器，配合.layui-drawer-right与.show类控制位移，z-index须大于19891014，并通过success回调或纯DOM方式触发动画。
在Layui中实现右侧滑出抽屉层（Drawer效果），需绕过layer默认的居中弹窗逻辑，通过自定义样式+DOM操作+CSS3动画控制位移与显示，不能直接调用layer.open的type:1或type:2默认配置达成滑入效果。
准备基础HTML结构
在body末尾插入一个空的
在页面最底部添加：
这一步不可省略，layer不支持直接渲染到非body子元素，【id="drawer-layer"必须唯一且位于body最深层级】，否则动画错位或触发失败。
编写右侧滑入CSS动画规则
在全局样式表或
.layui-drawer-right { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: #fff; box-shadow: -2px 0 12px rgba(0,0,0,.15); z-index: 19891015; transition: right .3s ease; }
.layui-drawer-right.show { right: 0; }
注意：width值需与后续JS中设置的宽一致；height设为100vh确保撑满视口；【z-index必须大于layer默认的19891014】，否则被遮挡。
封装抽屉层打开函数
方法一：使用layer.open + 自定义content + 手动触发动画
第一步：调用layer.open，type设为1，content指向#drawer-layer，并关闭遮罩、关闭按钮、移动等干扰项：
let drawerIndex = layer.open({ type: 1, content: $('#drawer-layer'), shade: false, closeBtn: 0, anim: -1, isOutAnim: false, offset: 'rt', area: ['400px', '100%'], success: function(layero){ $(layero).removeClass('layui-layer-page').addClass('layui-drawer-right'); setTimeout(() => { $(layero).addClass('show'); }, 10); } });
第二步：在success回调中移除layer默认class，添加自定义类，并用setTimeout延迟10ms触发show类——这是关键，否则transition无法捕获初始状态变化。
第三步：抽屉内需手动添加关闭按钮，绑定事件：$('#drawer-layer').append(''); 点击后执行：$(layero).removeClass('show'); setTimeout(() => layer.close(drawerIndex), 300);
提供简洁版快捷调用方式
方法二：不依赖layer.open渲染，纯DOM+CSS控制（更轻量、无layer样式污染）
直接操作#drawer-layer节点：$('#drawer-layer').html('你的抽屉内容').addClass('layui-drawer-right show');
关闭时仅需：$('#drawer-layer').removeClass('show');
300ms后自动销毁DOM：setTimeout(() => { $('#drawer-layer').removeClass('layui-drawer-right').empty(); }, 300);
这一步操作起来很简单，直接把HTML字符串塞进去就行，适合内容静态、无需layer内置拖拽/缩放等能力的场景。
