侧边栏小屏滑出无动画因translate-x-0是静态值，需配合transition-transform和起始态（如translate-x-[-100%]）及响应式类控制显隐。
侧边栏在小屏上用 translate-x-0 滑出，为什么没动画？
因为 translate-x-0 本身不触发过渡，它只是个静态定位值。CSS 过渡需要明确的「起始态 → 终止态」变化，且两个状态都得有可动画属性（比如 transform），同时还得配 transition 声明。
- 必须给侧边栏元素显式加
transition-transform（或简写transition），例如：transition-transform: transform 0.25s ease-in-out - 初始态不能是
translate-x-0，得是translate-x-[-100%]或translate-x-[-280px]（取决于侧边栏宽度） - 别依赖 Tailwind 的
duration-工具类单独生效——它只生成transition-duration，不带transition-property，动画不会动
如何让 translate-x-0 在移动端生效、桌面端常驻？
靠 Tailwind 的响应式前缀组合，但要注意断点逻辑和默认行为：桌面端不是“自动显示”，而是“不应用隐藏类”。关键在控制「隐藏态」的起始点。
- 移动端默认隐藏：用
translate-x-[-100%] md:translate-x-0—— 小屏左移全屏宽，中屏及以上还原为 0 - 如果想桌面端固定、移动端点击展开：需配合 JS 切换类，比如加一个
is-open状态，再写.is-open .sidebar { transform: translateX(0); }，否则纯 CSS 无法响应点击 - 避免用
hidden+block切换：这会触发重排，且和translate动画冲突；坚持用transform+transition这一条路径更可控
translate-x-0 和 left: 0 哪个更适合做侧边栏位移？
translate-x-0 是更优解，本质是 GPU 加速的合成层操作，滚动/动画更流畅；left 触发重排，尤其在复杂布局里容易卡顿。
-
translate-x不影响文档流，侧边栏即使位移，主内容区无需重新计算布局 -
left需要父容器设position: relative，且若侧边栏有width变化，可能引发意外的 margin collapse 或 flex 折行 - 兼容性无差别：现代浏览器对
transform支持远好于老式定位 hack，连 iOS Safari 13+ 都没问题
过渡时间太短闪一下、太长又拖沓，怎么选 duration？
0.25s 是平衡点，人眼能感知变化但不觉延迟；超过 0.35s 就容易觉得“系统反应慢”，低于 0.15s 则像没动。
- 别直接写
duration-300，它只设时长，没指定属性——务必搭配transition-transform - 想微调曲线？Tailwind 默认
ease-in-out足够，真要改就自定义transition-[transform] duration-250 ease-[cubic-bezier(0.34,1.56,0.64,1)] - 注意：如果侧边栏含图片或字体加载，动画开始时内容还没渲染完，会看到“空白滑入”——加
will-change: transform提前提示浏览器准备合成层，但别滥用，仅对频繁动画的元素加
真正麻烦的是嵌套滚动和 backdrop-filter 透出背景时的 repaint 行为，那已经超出 translate-x-0 范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
