应使用 transform: translatex() 实现侧边悬浮菜单动画，配合 position: fixed/absolute、精准 timing-function、will-change、pointer-events 和完整键盘可访问性支持。
侧边悬浮菜单用 transform 移入移出，别用 left 或 margin
用 left 或 margin 动画侧边菜单，浏览器每次都要重排（reflow），卡顿明显，尤其在低端设备或内容多的页面上。改用 transform: translateX()，只触发重绘（repaint），性能好得多。
- 初始状态设为
transform: translateX(-100%)（完全左移出视口） - 展开时改为
transform: translateX(0)，收起再切回去 - 必须搭配
transition: transform 0.3s ease-in-out，否则没动画 - 注意：
transform不影响文档流，菜单元素仍占位，得加position: fixed或absolute避免挤内容
transition 的 timing-function 别硬套 ease，按交互意图选
用户点开菜单是主动操作，希望响应快、反馈明确；收起时可以稍缓一点，给人“收稳了”的感觉。用统一的 ease 反而模糊了意图。
- 展开建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-in-out但开头更利落） - 收起可用
cubic-bezier(0.5, 0, 0.5, 1)（更平滑收尾） - 千万别写成
transition: all 0.3s——会把opacity、z-index等不该动的也带上，导致意外跳变 - 如果同时控制显隐，
opacity动画要和transform同步，但需单独声明：transition: transform 0.3s, opacity 0.3s
移动端点击穿透和 focus 状态容易失效
悬浮菜单常带按钮或链接，但在 iOS Safari 或某些安卓 WebView 里，第一次点击没反应，或者焦点样式不出现——大概率是 transform 导致渲染层被隔离，事件捕获异常。
- 给菜单容器加
will-change: transform（仅在需要动画时），能提前提示浏览器提升图层，改善点击响应 - 确保菜单内可点击元素有
cursor: pointer和touch-action: manipulation，避免 iOS 300ms 延迟 - 不要依赖
:focus显示菜单（比如用input:focus ~ .menu），这种纯 CSS 方案在触屏下几乎不可靠；改用 JS 控制is-open类名更稳 - 若用
visibility: hidden配合transform控制显隐，记得收起时加pointer-events: none，否则仍可能拦截点击
键盘可访问性不是“加上 tabindex 就完事”
侧边菜单一旦展开，焦点必须自然落入菜单内部第一个可交互元素；关闭后焦点还得回到触发按钮。否则屏幕阅读器用户或键盘党会迷失。
- 菜单展开后，用 JS 调用
menuElement.querySelector('a, button').focus() - 监听
Escape键关闭菜单，并把焦点切回触发按钮：triggerButton.focus() - 菜单容器加
role="dialog"和aria-modal="true"，告诉辅助技术这是模态层 - 别忘了用
aria-expanded动态更新触发按钮的状态：button.setAttribute('aria-expanded', 'true')
pointer-events 组合。动画一加，视觉对了，但键盘和触屏就断连——这不是“差不多就行”的问题，是功能直接残缺。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
