必须用max-height+overflow:hidden实现平滑展开收起，因height:auto不可插值；transition须写在基础样式中，仅opacity、transform、max-height等可动画属性才生效。
直接用 transition 配合 opacity 和 transform 最稳，别碰 display 或 height: auto；需要内容展开收起时，必须用 max-height + overflow: hidden，且初始值不能是 0 或未声明。
为什么 transition 加了没反应
常见现象是点击或 hover 后毫无动画，不是浏览器不支持，而是过渡根本没被触发：
-
transition只对可插值的属性生效——opacity、transform、max-height行，display、height: auto、z-index不行 - 基础样式里必须显式声明初始值，比如要过渡
opacity，就得先写opacity: 1，不能只在:hover或切换 class 里写opacity: 0 - JS 直接改
element.style.opacity = 0再改回 1，中间没留重排机会，动画会跳过；加一句void element.offsetWidth强制同步布局就能救回来
卡片展开/收起用 max-height 还是 height
用 height: auto 配合 transition 是无效的——浏览器无法对 auto 做插值计算，结果就是瞬间展开或不动。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须用
max-height：初始设max-height: 0+overflow: hidden，展开时设一个足够大的安全值（如500px） - 若卡片内容高度差异大（2 行 vs 10 行），建议 JS 动态读取
element.scrollHeight设置max-height，避免硬编码导致截断或拖沓 - 移动端 Safari（iOS 15+）对
max-height过渡有渲染优化问题，快速连点易跳帧；可加will-change: max-height提前提示，但别滥用
卡片悬停/点击时内部元素不同步怎么办
常见现象：卡片拉伸完成，里面的文字才开始淡入，视觉割裂。这不是 bug，是各属性过渡时机没对齐。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transition: max-height 0.3s ease, opacity 0.2s 0.1s ease, transform 0.2s 0.1s ease，让opacity和transform延迟 0.1s 启动 - 所有隐藏逻辑走
visibility: hidden+opacity: 0组合，别用display: none——它不可动画，且会破坏 DOM 流 - 如果用了
transform: translateY()做入场位移，确保初始值不是固定translateY(-20px)，而应基于父容器高度动态计算，否则在不同尺寸卡片里错位
最易被忽略的是“可绘制状态”：旧元素在过渡开始前不能是 display: none、visibility: hidden 或 opacity: 0，哪怕 opacity: 0.001 也比彻底隐藏强——View Transitions API 或 CSS 快照机制都依赖它能被拍到。
