Can I maintain CSS transitions when the toggle attribute is used?
P粉465675962
P粉465675962 2023-08-02 21:13:37
0
1
473
<p>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粉465675962
P粉465675962

reply all(1)
P粉038161873

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template