CSS过渡需作用于可插值属性，width或left动画失效常因混用auto值或display/visibility切换；应优先用transform: translateX()配合确定数值和will-change优化，避免重排与兼容性问题。
transition 用在 width 或 left 时为什么没动画
因为 CSS 过渡只对可计算、可插值的属性生效，而 display: none、visibility: hidden、height: auto 这类值无法参与过渡计算——浏览器根本不知道“从 auto 到 200px”该按什么节奏变。
- 内容区域横向平滑过渡，必须确保起始/结束状态都使用确定数值：比如用
width就别混用auto；用transform: translateX()比直接改left更可靠（触发硬件加速且不触发重排） - 常见错误是给选项卡容器加
transition: all 0.3s，但切换时实际触发的是display切换或visibility开关——这两者根本不会动 - 如果内容高度不确定，优先用
max-height过渡代替height，设一个足够大的上限值（如max-height: 500px），并配合overflow: hidden
tab 切换时内容区横向滑入，该用 transform 还是 margin
transform 是更稳妥的选择。它不改变文档流，不影响其他元素布局，且浏览器对其优化充分；而靠 margin-left 推动会导致父容器重排，尤其在频繁切换或内容较多时容易卡顿。
- 用
transform: translateX(-100%)表示隐藏态，translateX(0)表示显示态，配合transition: transform 0.3s ease-in-out - 注意：必须给过渡元素设置
will-change: transform（仅在需要时），否则某些旧版 Safari 可能跳帧 - 如果用
margin，需确保父容器有明确宽度且不包裹white-space: nowrap，否则可能因换行导致位移错位
Vue/React 中动态切换 tab，transition-group 不触发横向动画
因为 <transition-group></transition-group> 默认按 DOM 节点顺序插入/移除，不自动处理位置偏移；横向滑动需要显式控制每个子项的定位和 transform 偏移量，不能只依赖 enter/leave 类名。
- 在 Vue 中，用
<transition mode="out-in"></transition>包裹单个内容区，而非用<transition-group></transition-group>包裹多个 tab 内容块 - React 中若用
react-transition-group，需配合CSSTransition的classNames+ 自定义 class 控制transform，且要为每个 tab 内容设置绝对定位或 flex-shrink: 0 - 关键点：动画方向由当前激活 tab 的索引决定，比如第 2 个 tab 激活时，前一个内容应
transform: translateX(-100%)，下一个应translateX(100%)，这需要在组件内计算并注入 style
横向过渡在 Safari 上闪一下或直接跳变
这是 Safari 对 transform 和 will-change 的兼容性处理不一致导致的，尤其在 iOS 15–16 和 macOS Monterey 上常见。
立即学习“前端免费学习笔记（深入）”；
- 强制开启 GPU 加速：给过渡元素加
transform: translateZ(0)或backface-visibility: hidden - 避免在 transition 中混用
transform和opacity，Safari 有时会降级为软件渲染；分开写两个 transition（如transform 0.3s, opacity 0.3s）反而更稳 - 如果用了
flex布局做 tab 内容容器，确保其父元素设置了min-width: 0，否则 Safari 可能忽略子项的flex-shrink导致宽度计算异常
