Kann ich CSS-Übergänge beibehalten, wenn das Toggle-Attribut verwendet wird?

Question

Ich habe ein Div, das sich von links nach rechts bewegt. Damit es immer auf dem Bildschirm angezeigt wird und beim Ändern der Fenstergröße nie ausgerichtet wird, wechsle ich die Verwendung von links und rechts, je nachdem, welche Seite des Bildschirms am nächsten ist.

P粉038161873 · Answer

当你从右到左切换时，你的过渡似乎会迅速转移到另一边的原因是因为你将左和右设置为自动值。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应该有用