我有一个div，我从左到右移动。为了使它始终在屏幕上，并且在窗口调整大小时不会错位，我根据屏幕的哪一侧最接近，切换使用left和right。
发生的情况是，只要用户在屏幕的同一侧来回移动div（也就是说，div保持朝向相同的属性），我用于更改左和右属性的CSS过渡就可以顺利工作，但是一旦方向从左切换到右，反之亦然，就没有过渡，div只是立即移动。
如何在使用left和right之间切换时保持我拥有的CSS过渡（或我没有的类似过渡）？
我在JavaScript中有这个函数：

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;

型
我希望div能继续从左到右平滑地移动，即使在切换auto试点上的属性时，但最终没有工作。不知道从这里如何进行。我真的不想使用一个单一的属性，因为如果调整窗口的大小，它会弄乱div的位置，而手动一步一步地移动div绝对是最后的手段。