Puis-je conserver les transitions CSS lorsque l'attribut toggle est utilisé ?

Question

J'ai un div qui se déplace de gauche à droite. Pour qu'il soit toujours à l'écran et jamais aligné lorsque la fenêtre est redimensionnée, j'inverse l'utilisation de la gauche et de la droite en fonction du côté de l'écran le plus proche.

P粉038161873 · Answer

La raison pour laquelle votre transition semble passer rapidement de l'autre côté lorsque vous passez de droite à gauche est parce que vous définissez gauche et droite sur des valeurs automatiques. Les transitions CSS (ou les animations CSS en général) ne fonctionnent pas avec les accessoires avec des valeurs automatiques.

Ceci est tiré de la documentation Utilisation des transitions CSS :

Peut-être feriez-vous mieux d'utiliser les propriétés CSS de transformation avec la fonction translateX() au lieu des accessoires CSS gauche/droite. Cela vous donnera une valeur CSS unique et fiable ? conversion et améliorer les performances.

Votre code pourrait ressembler à ceci :

function moveTimeline(screenIndex) {

  ...

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

Votre transition CSS ressemblera à ceci :

transition: transform 1s ease;

H devrait être utile