Layui折叠面板动画可通过CSS覆盖transition属性禁用。全局禁用用.layui-colla-content{transition:none!important},局部禁用则添加自定义class如.no-anim .layui-colla-content{transition:none!important}。

Layui 的折叠面板(collapse)默认展开/收起时带有滑动动画,但官方并未提供直接关闭该动画的配置项。要取消这个效果,核心思路是**覆盖其 CSS 过渡行为**,让高度变化变为即时切换。
方法一:全局禁用 collapse 动画(推荐)
折叠面板的动画由 .layui-colla-content 元素上的 transition 属性控制。只需在页面样式中覆盖它即可:
- 添加以下 CSS(放在 layui.css 之后,或使用
标签内联):
这样所有折叠面板内容的显示/隐藏都会变成瞬间切换,无任何过渡效果。
方法二:仅对特定面板禁用动画
如果只想取消某一个折叠面板的动画,可以给它的容器加自定义 class,再针对性覆盖:
- HTML 中为该面板添加标识,例如:...
- 对应 CSS:
.no-anim .layui-colla-content { transition: none !important; }
注意事项
取消动画后,layui-show 类仍可正常使用,内容显隐逻辑不受影响;
若同时使用了手风琴模式(lay-accordion),切换行为依然有效,只是没了滑动过程;
不建议用 JS 强制修改 style.transition,因为 layui 内部会重置样式,CSS 覆盖更稳定可靠。











