抽屉组件用 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 关闭感知和交互。
但注意顺序：
- 打开时：先设
visibility: visible→ 再移入（transform: translateX(0)） - 关闭时：先移出（
transform: translateX(-100%)）→ 等 transition 结束（监听transitionend）→ 再设visibility: hidden - 不等结束就设
visibility: hidden，动画会直接跳走
React 里用 useTransition 控制挂载时机
如果抽屉内容复杂（比如带图表、表单），关掉后还留着 DOM，浪费内存。用 React 的 useTransition 可以把卸载延迟到动画结束后再执行。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操要点：
- 用
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 监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
