抽屉组件用 transform 过渡最稳，应避免 width/height 和 max-height 动画；需配合 visibility、pointer-events 控制交互与可访问性，并用 useTransition 延迟卸载，移动端注意 touch-action 防手势冲突。

抽屉组件用 transform 过渡最稳

直接改 width 或 height 做抽屉开合，容易触发重排、卡顿，尤其在低端设备上。用 transform: translateX()（侧滑）或 translateY()（上下拉）配合 transition，GPU 加速，性能好，兼容性也够（IE10+）。别碰 max-height 动画——它没法精确控制起止，且过渡生硬。

关键点：

• transform 必须作用在有明确尺寸的容器上，抽屉内容区建议加 overflow: hidden 防内容溢出
• 过渡属性写死：transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)，贝塞尔曲线比 ease 更符合“抽屉”物理感
• 初始状态用 transform: translateX(-100%)（左抽屉）或 translateX(100%)（右抽屉），不要用 display: none，否则 transition 不触发

visibility 和 pointer-events 配合关掉交互

只靠 transform 移走抽屉还不够：它还在 DOM 里，可能挡点击、被屏幕阅读器读到。得配 visibility: hidden 和 pointer-events: none 关闭感知和交互。

但注意顺序：

立即学习“前端免费学习笔记（深入）”；

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 打开时：先设 visibility: visible → 再移入（transform: translateX(0)）
• 关闭时：先移出（transform: translateX(-100%)）→ 等 transition 结束（监听 transitionend）→ 再设 visibility: hidden
• 不等结束就设 visibility: hidden，动画会直接跳走

React 里用 useTransition 控制挂载时机

如果抽屉内容复杂（比如带图表、表单），关掉后还留着 DOM，浪费内存。用 React 的 useTransition 可以把卸载延迟到动画结束后再执行。

实操要点：

• 用 const [isPending, startTransition] = useTransition()
• 关闭逻辑里调用 startTransition(() => setIsOpen(false))
• 配合 useEffect 监听 isOpen 变化，在 !isOpen && !isPending 时真正清空内容或重置状态
• 别直接在 useEffect 里设 isOpen = false 后立刻卸载，会打断动画

移动端要防 touch-action: pan-x 干扰

抽屉左右滑动时，如果页面本身支持横向滚动（比如轮播图、表格横滚），手指一滑可能触发页面滚动而非抽屉动画。加 touch-action: pan-x 到抽屉容器能锁定手势方向。

但注意边界情况：

• 只对抽屉本体加，别误加到 body 或 layout 根节点
• 如果抽屉里有可横向滚动的子元素（如代码块、长表格），需在子元素上覆盖 touch-action: pan-x pan-y
• iOS Safari 对 touch-action 支持较好，但 Android WebView 旧版本可能忽略，得备选 preventDefault() 手动拦截

抽屉过渡看着简单，真正踩坑多在「关闭后状态残留」「手势冲突」「动画与挂载不同步」这三块。尤其是从 Vue/React 直接套用 show/hide 指令时，很容易漏掉 visibility 切换时机或 transitionend 监听。