-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<transition-group> not working as expected on page scroll #8424
Labels
Comments
Same problem. How to fix? |
13 tasks
FWIW I worked around this by forcing scrolling to the top on route transitions:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Version
2.5.16
Reproduction link
https://codesandbox.io/s/kxkmp9mov3
Steps to reproduce
<transition-group>
.What is expected?
The existing items should stick to the container, instantly appear in the final position, without transitions.
What is actually happening?
The existing items jump out of the container because of the sudden change on vertical position and slowly move back to the expected position.
Internally,
<transition-group>
is usinggetBoundingClinetRect()
to track the positions of transition items. This works fine when no page scroll is introduced. But when browsers force page scroll on certain situations, the container (and the rest of the page) flashed into the final position while transition items are stuck in the old position based on the viewport, which makes it look like they suddenly jump out of the document and start performing unexpected transitions.Maybe we can provide some new prop on
<transition-group>
, say,origin: 'viewport' | 'document'
, to optionally calculate positions based on the canvas origin instead of the viewport.F.Y.I.
When forced page scroll is triggered:
When not triggered:
The text was updated successfully, but these errors were encountered: