最稳妥方式是用max-height配合overflow-hidden和固定预估值（如500px）实现过渡，禁用display:none和height:auto；需确保padding/border不干扰收起视觉、JS控制class切换并同步ARIA属性、移动端补点击逻辑、IE11降级用transform:scaleY()。
用 CSS transition + max-height 实现平滑折叠展开
纯 CSS 实现悬浮窗的折叠展开，最稳妥的方式不是用 display: none（它无法过渡），也不是直接过渡 height（因为高度不确定），而是用 max-height 配合 transition。关键在于设一个“足够大但不过分夸张”的 max-height 值，比如 500px —— 要比悬浮窗内容最大可能高度略高，又不能设成 10000px，否则动画会明显变慢、卡顿。
常见错误是把 max-height 设为 0 同时还留着 padding/margin/border，导致收起后仍有空白；或者忘了给元素设 overflow: hidden，内容会溢出。
-
max-height初始值设为0，展开时设为预估最大高度（如400px） - 必须加
overflow: hidden，否则过渡无效或内容外露 - 过渡写在
max-height上，不要只写all，避免意外触发其他属性动画 - 如果内容含图片或字体加载延迟，首次展开可能高度计算不准，可加
font-size: 0或visibility: hidden初始态来规避
JavaScript 控制 class 切换比内联样式更可控
用 JS 切换 .is-open 这类 class，比直接操作 element.style.maxHeight 更利于维护和调试。尤其当悬浮窗需要响应多个触发源（比如点击按钮、悬停、键盘 Enter）时，class 方式逻辑更清晰，也方便后续加 ARIA 属性（如 aria-expanded）。
容易踩的坑：事件绑定在错误目标上（比如绑在悬浮窗内部按钮却没阻止冒泡），导致点击后立刻收起；或没处理键盘交互（Escape 关闭、Tab 焦点管理），影响可访问性。
- 用
classList.toggle('is-open')替代手动增删，避免状态错乱 - 收起时建议用
setTimeout延迟移除is-open，确保 CSS 过渡完成后再清理状态（防止快速连点出 bug） - 加上
aria-expanded="true/false"并同步更新，屏幕阅读器能正确播报状态
移动端要注意 :hover 不可靠，得补点击逻辑
很多开发者习惯用 .tooltip:hover .content 实现悬浮展开，但在 iOS 和安卓大部分浏览器里，:hover 只在第一次点击后短暂生效，且不支持长按模拟。结果就是——PC 正常，手机点一次没反应，再点才展开，体验断裂。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真正兼容的做法是：默认禁用 :hover 展开，用 JS 绑定 click，并在 touch 设备上监听 touchstart（注意防重复触发）。CSS 里可以保留 :hover 作为增强，但不能依赖它。
- 用
'ontouchstart' in window或matchMedia('(hover: none)')检测是否为触屏设备 - 移动端点击后，建议自动聚焦到第一个可交互元素（如链接或按钮），方便继续操作
- 避免在悬浮窗内放
input或textarea后立即弹出软键盘又收起，iOS 会有明显闪烁
IE11 下 max-height 过渡会失效？换用 transform: scaleY()
IE11 对 max-height 的 transition 支持不一致，尤其在从 0 到非零值时经常跳变或不动。这时候更可靠的降级方案是用 transform: scaleY(0) → scaleY(1)，配合 origin-top 和 overflow: hidden，视觉效果几乎一样，且性能更好（GPU 加速）。
注意：scaleY 是缩放整个元素，如果内部有绝对定位子元素，它们的定位参考点也会被缩放影响，需额外用 transform: scaleY(1) 单独重置。
- IE11 专用规则要放在独立媒体查询或条件注释里，避免干扰现代浏览器
-
transform过渡需显式写transition: transform 0.2s ease-in-out，不能靠简写transition: all - 别忘记加
will-change: transform提升渲染性能（但别滥用，只加在实际动画的元素上）
实际做下来，最难的不是写动效，而是让折叠状态在各种边界条件下都稳定：窗口 resize、内容动态加载、多实例并存、键盘导航切换……这些地方一疏忽，用户就会觉得“明明点了，怎么没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
