Layui弹出层如何实现点击按钮后弹窗水平翻转动画-Layui教程-PHP中文网

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)。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

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;
  }
}