OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Set direction in animate call directly (#32523)

Browse Source 
Setting the animation's currentTime causes a quirk where the transition
can end up off by a bit and the end state can be slightly off the end
time.

However, I realized that we don't have to because if we just set the
direction in the `animate()` call directly the Safari bug goes away.
This commit is contained in:
Sebastian Markbåge 2025-03-05 09:33:06 -05:00 committed by GitHub
parent e9252bcdcc
commit e03ac20f94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js vendored
View File

@ -1754,7 +1754,7 @@ function animateGesture(
moveOldFrameIntoViewport(keyframes[0]);
}
const reverse = rangeStart > rangeEnd;
const anim = targetElement.animate(keyframes, {
targetElement.animate(keyframes, {
pseudoElement: pseudoElement,
// Set the timeline to the current gesture timeline to drive the updates.
timeline: timeline,
@ -1764,20 +1764,14 @@ function animateGesture(
easing: 'linear',
// We fill in both direction for overscroll.
fill: 'both',
// We play all gestures in reverse, except if we're in reverse direction
// in which case we need to play it in reverse of the reverse.
direction: reverse ? 'normal' : 'reverse',
// Range start needs to be higher than range end. If it goes in reverse
// we reverse the whole animation below.
rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
});
if (!reverse) {
// We play all gestures in reverse, except if we're in reverse direction
// in which case we need to play it in reverse of the reverse.
anim.reverse();
// In Safari, there's a bug where the starting position isn't immediately
// picked up from the ScrollTimeline for one frame.
// $FlowFixMe[cannot-resolve-name]
anim.currentTime = CSS.percent(100);
}
}
export function startGestureTransition(