Layui layer.open() 不支持 anim: 7 水平翻转动画，需在 success 回调中手动添加 CSS 类并配合 preserve-3d、rotateY 及 -webkit 前缀实现进出翻转动画。
layui.open() 默认不支持翻转动画，得手动改 CSS
layui 的 layer.open() 自带的 anim 参数只有 0–6 这几种内置动画（如淡入、从上滑下），anim: 7 是水平翻转——但这个值在官方文档里没写，实际也**不生效**。原因很简单：layui 2.9.x 及之前版本压根没实现 anim: 7 对应的 css 动画类，源码里找不到 layui-anim-scalex 或类似定义。
所以想让弹层水平翻转，必须绕过 anim，自己加 class + CSS 动画，并控制显示时机。
- 不要依赖
anim: 7，它只是个空壳，写了也没用 - 别在
layer.open()后立刻加 class，因为 DOM 还没插入或未渲染完成 - 翻转动画需要
transform-style: preserve-3d和明确的transform-origin，否则会失真或偏移
给弹层容器加 .layui-layer-horizontal-flip 类并配 CSS
在 layer.open() 的 success 回调里操作最稳——这时 layer DOM 已挂载且可见，能确保样式生效。
layer.open({
type: 1,
content: '#myDiv',
success: function(layero, index) {
// 等 layero 渲染完，再加自定义动画类
layero.addClass('layui-layer-horizontal-flip');
}
});
对应 CSS 要写在全局样式中（不能 scoped，不能内联）：
<pre class="brush:php;toolbar:false;">.layui-layer-horizontal-flip {
transform-style: preserve-3d;
}
.layui-layer-horizontal-flip .layui-layer-content {
animation: horizontalFlip 0.35s ease-out both;
}
@keyframes horizontalFlip {
0% {
transform: rotateY(90deg);
opacity: 0;
}
100% {
transform: rotateY(0);
opacity: 1;
}
}
.layui-layer-content 是实际内容区域，动画加在这儿比加在 <code>.layui-layer更可控- 动画时长建议 ≤ 0.4s，太长会显得卡顿；
ease-out比linear更自然 - 必须设
opacity配合旋转，否则 90deg 时内容会“糊”在侧面不可见
关闭时也要补翻转动画，否则突兀
只做打开动画，关掉时直接消失，体验断层。得监听关闭动作，在真正移除前触发反向动画。
用 layer.close() 不行——它不提供关闭前钩子。正确做法是：绑定弹层右上角关闭按钮或遮罩点击事件，在里面手动触发动画，等结束再调 layer.close(index)。
success: function(layero, index) {
layero.addClass('layui-layer-horizontal-flip');
// 监听关闭按钮（右上角 ×）
layero.find('.layui-layer-close').on('click', function() {
layero.find('.layui-layer-content').addClass('flip-out');
setTimeout(() => layer.close(index), 350);
});
// 监听遮罩关闭（可选）
layero.siblings('.layui-layer-shade').on('click', function() {
layero.find('.layui-layer-content').addClass('flip-out');
setTimeout(() => layer.close(index), 350);
});
}
CSS 补上退出动画：
.flip-out {
animation: horizontalFlipOut 0.35s ease-in both;
}
@keyframes horizontalFlipOut {
0% {
transform: rotateY(0);
opacity: 1;
}
100% {
transform: rotateY(-90deg);
opacity: 0;
}
}
- 别用
layero.on('click')直接绑整个弹层，会干扰内部表单/按钮点击 -
setTimeout时间必须和动画时长一致，否则提前关闭会导致动画被强制中断 - 如果用了
btn配置的确定按钮，也要单独给它加同逻辑的 click handler
移动端 Safari 下 rotateY 失效？加 -webkit-transform
iOS 15+ 之前的 Safari 对 transform: rotateY() 支持不完整，尤其嵌套较深时容易降级为无动画。必须显式加上 -webkit-transform 前缀才能触发硬件加速。
把上面 keyframes 里的 transform 补全：
@keyframes horizontalFlip {
0% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
- 只加
-webkit-transform不够，必须和标准属性共存，否则 Chrome/Firefox 可能忽略 - 如果项目还兼容 iOS 12 以下，还得加
transform-style: -webkit-preserve-3d - 别试图用
backface-visibility: hidden强制开启 3D，Layui 弹层结构复杂，容易引发重绘错位
翻转动画看着简单，真正跑通要同时搞定 DOM 时机、CSS 3D 上下文、前缀兼容、进出同步——漏掉任意一环，都会变成“点了没反应”或者“闪一下就没了”。
