Can I maintain CSS transitions when the toggle attribute is used?
P粉4656759622023-08-02 21:13:37
0
1
472
<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.
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)`
});
}
}
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:
Your CSS transition will look like this:
H should be useful