切换CSS left/right属性时如何维持平滑过渡效果？

问题背景 #

我有一个可左右移动的div，为确保窗口resize时它始终在屏幕内且不偏移，会根据其离屏幕哪一侧更近切换使用left和right属性。目前同一侧移动时，left/right的CSS过渡效果流畅，但切换属性方向时，过渡消失，div瞬间移动。需要维持平滑过渡，且不能使用单一属性（避免窗口resize时位置错乱），也不想手动分步移动。

现有代码：

function moveTimeline(screenIndex) {
    // possibly variable because of window resize
    let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces;
    // check what side the div is supposed to be attached to
    let isOnLeftSide = (screenIndex < num_timelinePieces / 2);
    // reverse the index if it's on the right side
    if (!isOnLeftSide)
        screenIndex = screenIndex - num_timelinePieces;
    // calculate new pixel position
    let new_timelinePosition = Math.floor(screenIndex * timelineSectionWidth);

    // unset the unused properties so they don't interfere
    if (isOnLeftSide) {
        timelineBackground.css({
            "left": "-" + new_timelinePosition + "px",
            "right": "auto"
        });
    } else {
        timelineBackground.css({
            "left": "auto",
            "right": (new_timelinePosition) + "px"
        });
    }
}

CSS：

transition: left 1s ease, right 1s ease;

推荐解决方案：transform过渡+left/right静态定位 #

核心思路是让left/right只负责窗口resize时的静态定位，用transform: translateX()处理所有移动的过渡动画——既避免了切换属性导致的过渡断裂，又能保证resize时的位置正确性。

修改步骤：

1. 更新CSS，把过渡核心目标改为transform：

/* 保留left/right的短过渡适配resize，主动画依赖transform */
transition: left 0.2s ease, right 0.2s ease, transform 1s ease;

2. 调整JavaScript逻辑，用transform实现平滑移动，left/right只做侧边锚定：

function moveTimeline(screenIndex) {
    let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces;
    let isOnLeftSide = screenIndex < num_timelinePieces / 2;
    
    // 计算相对于对应侧边的偏移量
    let offset = Math.floor(
        isOnLeftSide 
            ? screenIndex * timelineSectionWidth 
            : (screenIndex - num_timelinePieces) * timelineSectionWidth
    );

    // 设置静态锚点，确保resize时位置正确
    timelineBackground.css({
        "left": isOnLeftSide ? "0" : "auto",
        "right": isOnLeftSide ? "auto" : "0"
    });

    // 用transform实现平滑过渡动画
    timelineBackground.css({
        "transform": `translateX(${isOnLeftSide ? -offset : offset}px)`
    });
}

备选方案：强制重排实现属性切换过渡 #

如果必须保留left/right的切换逻辑，可以在切换前先同步当前位置到目标属性，强制浏览器重排后再设置目标值，让过渡生效：

function moveTimeline(screenIndex) {
    let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces;
    let isOnLeftSide = screenIndex < num_timelinePieces / 2;
    let targetIndex = isOnLeftSide ? screenIndex : screenIndex - num_timelinePieces;
    let new_timelinePosition = Math.floor(targetIndex * timelineSectionWidth);

    // 获取元素当前计算样式
    const computedStyle = window.getComputedStyle(timelineBackground[0]);
    const currentLeft = parseFloat(computedStyle.left);
    const currentRight = parseFloat(computedStyle.right);

    if (isOnLeftSide) {
        // 从right切换到left时，先同步当前位置到left并强制重排
        if (computedStyle.right !== "auto") {
            const currentOffset = documentElement.clientWidth - timelineBackground[0].offsetWidth - currentRight;
            timelineBackground.css({ "left": `${-currentOffset}px` });
            // 强制浏览器重排，触发过渡条件
            void timelineBackground[0].offsetWidth;
        }
        // 设置最终left值，重置right为auto
        timelineBackground.css({
            "left": `-${new_timelinePosition}px`,
            "right": "auto"
        });
    } else {
        // 从left切换到right时，先同步当前位置到right并强制重排
        if (computedStyle.left !== "auto") {
            const currentOffset = -(currentLeft + timelineBackground[0].offsetWidth - documentElement.clientWidth);
            timelineBackground.css({ "right": `${currentOffset}px` });
            // 强制浏览器重排
            void timelineBackground[0].offsetWidth;
        }
        // 设置最终right值，重置left为auto
        timelineBackground.css({
            "left": "auto",
            "right": `${new_timelinePosition}px`
        });
    }
}

第一种方案（transform）更简洁可靠，是优先推荐的实现方式。

内容的提问来源于stack exchange，提问作者yinny