layui.form.render() 无法触发动画因其仅重绘样式而不控制DOM显示状态；需用max-height+overflow:hidden配合CSS过渡，展开时动态设为scrollHeight并调用form.render()补全渲染。

为什么直接用 layui.form.render() 无法触发搜索区域动画

因为 layui 的表单组件（如 select、input）本身不感知容器高度变化，layui.form.render() 只负责初始化/重绘表单项样式，不会操作 dom 显示状态或触发动画。展开收起必须手动控制容器的 height 或 max-height，再配合 css 过渡。

用 max-height + overflow: hidden 实现平滑过渡

这是最稳妥的方案，避免 height: auto 无法过渡的问题。关键点在于：初始 max-height 设为一个略大于内容的固定值（比如 0 → 200px），而非 auto。

• 给搜索区域外层加唯一 ID，例如 <div id="search-panel"> <li>CSS 中定义过渡：<pre class="brush:php;toolbar:false;">#search-panel { transition: max-height .3s ease-out, opacity .2s ease; overflow: hidden; }</pre> </li> <li>初始状态设 <code>max-height: 0; opacity: 0;，展开时设为足够容纳所有表单项的值（实测 200px 通常够用）
• 注意：如果表单项含 layui-select-title 等动态生成结构，需确保展开后调用 layui.form.render('select') 等补全渲染

JavaScript 控制展开/收起逻辑要避开两个坑

常见错误是直接切换 display: none/block —— 这会中断 CSS 过渡；或用 slideToggle（jQuery）但没适配 Layui 表单重绘时机。


深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载
• 用 classList.toggle() 切换预设类名比内联 style 更清晰，例如：

  document.getElementById('search-panel').classList.toggle('expanded');

• 在展开后的回调里（或 setTimeout 延迟一帧），再执行 form.render()，否则下拉框可能显示错位
• 按钮文字切换建议用数据属性记录状态，而不是依赖 DOM 文本判断：

  btn.dataset.expanded = 'true'; // 而不是 if (btn.innerHTML.includes('展开')) {...}

• 若搜索区域含日期控件（laydate），收起前应调用 laydate.render().close() 防止浮层残留

移动端适配时 max-height 值要留余量

PC 端 200px 够用，但 iOS Safari 下字体渲染差异可能导致内容撑高，收起时出现滚动条或裁剪。更健壮的做法是：首次展开后读取真实 scrollHeight 并缓存。

• 首次点击展开时：

  const panel = document.getElementById('search-panel');<br>panel.style.maxHeight = panel.scrollHeight + 'px';

• 后续展开/收起复用该值，或每次动态计算（性能影响小，推荐）
• 收起动画结束（transitionend）后，可将 max-height 设回 0 并加 pointer-events: none 提升点击响应准确性
实际交互中容易被忽略的是：搜索区域内的 input 在收起动画未完成时仍可聚焦，导致光标悬停在不可见区域。需要在收起开始时主动 blur() 所有输入框，并禁用其 tabindex。