Can I maintain CSS transitions when the toggle attribute is used?

Question

I have a div that moves from left to right. To make it always on screen and never aligned when the window is resized, I switch the use of left and right depending on which side of the screen is closest.

P粉038161873 · Answer

The reason your transition seems to quickly go to the other side when you switch from right to left is because you set left and right to automatic values. CSS transitions (or CSS animations in general) do not work with props with auto values.

This is from the documentation Using CSS Transitions:

Perhaps you would be better off using transform CSS properties with the translateX() function instead of the left/right CSS props? Doing so will give you a A single, reliable CSS value to transform and improve performance.

Your code might look like this:

function moveTimeline(screenIndex) {

  ...

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

Your CSS transition will look like this:

transition: transform 1s ease;

H should be useful