當切換屬性使用時，我能保持CSS過渡嗎?

Question

我有一個div從左到右移動。為了使它始終在螢幕上，並且在視窗調整大小時永遠不會對齊，我根據螢幕的哪一側最接近切換左和右的使用。

發生的事情是，只要用戶在屏幕的同一側來回移動div(也就是說，div仍然面向相同的屬性)，我用於改變左右屬性的CSS過渡就能順利工作，但是一旦方向從左向右切換或反之亦然，就沒有過渡，div只是立即移動。

即使在使用左和右之間切換，我如何維護我擁有的CSS轉換(或我沒有的類似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繼續從左到右平滑地移動，即使在切換哪個屬性是自動駕駛，但這並沒有結束工作。不知道如何從這裡開始。我真的寧願不使用單一屬性，因為如果視窗被調整大小，這會弄亂div的位置，手動一步一步地移動div絕對是最後的手段。

Answer 1

當你從右到左切換時，你的過渡似乎會迅速轉移到另一邊的原因是因為你將左和右設定為自動值。 CSS轉場(或一般的CSS動畫)不適用於有auto值的道具。

這是來自文件使用CSS過渡:

也許你會更好地使用轉換CSS屬性與translateX()函數而不是左/右CSS道具?這樣做將為您提供一個單一的、可靠的CSS值來轉換，並提高效能。

你的程式碼可能看起來像這樣:

function moveTimeline(screenIndex) {

  ...

  if (isOnLeftSide) {
      timelineBackground.css({
         "transform": `translateX(-${new_timelinePosition}px)`
      });
  } else {
      timelineBackground.css({
          "transform": `translateX(${new_timelinePosition}px)`
      });
  }
}

你的CSS過渡看起來像這樣:

transition: transform 1s ease;

H應該有用