css 的 `left`/`right` 属性无法对 `auto` 值进行过渡，导致定位切换时动画中断；改用 `transform: translatex()` 可实现单值、高性能、可预测的平滑过渡。
在响应式时间轴、横向导航栏或拖拽式 UI 组件中，开发者常需根据视口尺寸或内容布局动态调整元素的定位策略（例如：靠近左侧时用 left，靠近右侧时用 right），以确保元素始终精准贴合边界且不因窗口缩放而错位。然而，当通过 JavaScript 在 left 和 right 之间切换并设置其中一者为 auto 时，CSS 过渡会立即失效——元素“跳变”而非“滑动”。根本原因在于：CSS 规范明确不支持对 auto 值执行插值动画，主流浏览器均遵循此行为，无论是否声明 transition: left 1s, right 1s。
✅ 正确解法：统一使用 transform: translateX()
transform 是 CSS 动画的黄金标准属性之一，具备以下关键优势：
- 可动画性稳定：translateX() 接受任意长度单位（px、rem、%）及负值，全程支持硬件加速；
- 不影响文档流与布局计算：不会干扰 left/right/top/bottom 等定位属性的原始语义，也避免因 auto 导致的过渡中断；
- 单值控制，逻辑简洁：无论元素视觉上“靠左”还是“靠右”，都只需更新一个 transform 值，彻底规避多属性竞争。
示例重构代码
function moveTimeline(screenIndex) {
const timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - document.documentElement.clientWidth) / num_timelinePieces;
const isOnLeftSide = screenIndex < num_timelinePieces / 2;
// 统一计算偏移量（向左为负，向右为正）
let offsetPx = Math.floor(screenIndex * timelineSectionWidth);
if (!isOnLeftSide) {
offsetPx = -(offsetPx - (num_timelinePieces * timelineSectionWidth)); // 转换为相对于右侧的等效左移量
}
// 仅操作 transform，无需 touch left/right
timelineBackground.css({
"transform": `translateX(${offsetPx}px)`
});
}对应 CSS 只需声明一次过渡：
.timeline-background {
transition: transform 1s ease;
/* 移除所有 left/right 相关 transition */
}? 提示：若需兼容旧版浏览器（如 IE10+），transform 仍完全可用；现代项目中还可进一步结合 will-change: transform 提升渲染性能（仅在动画频繁时按需添加）。
⚠️ 注意事项与最佳实践
- 避免混合使用 left/right 与 transform：二者叠加可能引发不可预测的复合位移，应彻底弃用 left/right 定位逻辑，将所有位移交由 transform 承担；
- 数值精度处理：Math.floor() 可防止子像素渲染抖动，但若需更高精度动画（如滚动跟随），可改用 Math.round() 或保留小数；
- 响应式重算触发：在 window.resize 中重新调用 moveTimeline() 时，建议防抖（debounce）以避免高频重绘；
- 无障碍考量：transform 不影响元素的语义位置（如屏幕阅读器仍按 DOM 顺序读取），无需额外 ARIA 处理。
综上，放弃对 left/right 的条件式切换，转向基于 transform 的统一位移控制，是解决定位过渡断裂问题最稳健、高效且符合现代 CSS 实践的方案。它不仅修复了动画中断，还提升了渲染性能与代码可维护性。
立即学习“前端免费学习笔记（深入）”；
