悬浮窗动画需避免display: none，改用opacity、transform或max-height等可过渡属性；子元素须默认定义transition及初始状态；JS控制应配合requestAnimationFrame或transitionend；移动端需用click/touchstart替代:hover。
用 transition 控制悬浮窗展开的 CSS 动画
直接给悬浮窗容器加 transition 是无效的——因为 display: none 无法过渡。必须改用可动画的属性，比如 opacity、max-height 或 transform。
推荐组合：opacity + transform: scaleY()（垂直缩放）或 transform: translateY()（位移），配合 overflow: hidden 防止内容溢出。
- 避免用
height: 0 → auto：auto 无法过渡，浏览器不支持 - 用
max-height替代 height：设一个足够大的固定值（如max-height: 500px），再过渡max-height和opacity - 过渡时间建议 200–300ms，太长显得迟滞，太短像闪现
:hover 触发时子元素如何平滑出现
如果悬浮窗是子元素（比如 .tooltip 或 .dropdown-menu），父元素 :hover 时需确保子元素能继承过渡声明，且初始状态已设置好。
关键点：子元素的 opacity、transform 和 visibility 必须在默认状态下定义，不能只靠 hover 后才写。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误写法：
.menu { opacity: 0; } .parent:hover .menu { opacity: 1; transition: opacity 0.2s; }—— transition 写在 hover 里，首次触发无动画 - 正确写法：
.menu { opacity: 0; transform: scaleY(0.8); transform-origin: top; transition: opacity 0.25s, transform 0.25s; } .parent:hover .menu { opacity: 1; transform: scaleY(1); } - 加
visibility: hidden / visible配合 opacity，防止鼠标穿透不可见区域
JavaScript 控制时怎么避免过渡失效
用 JS 切换 class（如 show）比直接改 style.display 更可控，但要注意 DOM 渲染时机。
常见问题：JS 立即添加 class 后立刻读取 offsetHeight 或强制重排，导致过渡被跳过。
- 不要这样：
el.classList.add('show'); el.offsetHeight; // 强制重排，但过渡可能已被跳过 - 应该用
requestAnimationFrame延迟到下一帧：el.classList.add('show'); requestAnimationFrame(() => el.classList.add('active'));（配合 CSS 中.show.active触发动画） - 或者监听
transitionend事件做后续操作，注意判断event.propertyName === 'opacity'避免重复触发
移动端悬停失效？别依赖 :hover
手机上没有“悬停”概念，:hover 在 iOS Safari 和多数安卓浏览器中仅模拟一次点击（且常不触发），纯 CSS 悬浮窗在移动端基本不可靠。
真实项目中，应改用 click/tap 触发 + JS 控制显隐，并为触摸设备单独加 touchstart 事件监听。
- 检测是否触屏：
'ontouchstart' in window || navigator.maxTouchPoints > 0 - PC 端保留
:hover，移动端用 JS 绑定click或touchstart，并加preventDefault()防止双击缩放 - 过渡效果本身兼容性没问题，但触发方式必须分端处理
transition，而是搞清「哪个属性能动」「什么时候开始动」「在哪种设备上会不动」。漏掉任意一环，用户看到的就是生硬弹出或干脆没反应。 
