View Transition Events #32041
Open
View Transition Events #32041
+93
−19
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Comparing: 0bf1f39...aac46d4 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
d122cad to
bcf15db
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds five events to
<ViewTransition>that triggers when React wants to animate it.onEnter: The<ViewTransition>or its parent Component is mounted and there's no other<ViewTransition>with the same name being deleted.onExit: The<ViewTransition>or its parent Component is unmounted and there's no other<ViewTransition>with the same name being deleted.onLayout: There are no updates to the content inside this<ViewTransition>boundary itself but the boundary has resized or moved due to other changes to siblings.onShare: This<ViewTransition>is being mounted and another<ViewTransition>instance with the same name is being unmounted elsewhere.onUpdate: The content of<ViewTransition>has changed either due to DOM mutations or because an inner child<ViewTransition>has resized.Only one of these events is fired per Transition. If you want to cover all updates you have to listen to
onLayout,onShareandonUpdate. We could potentially do something like fireonUpdateifonLayoutoronShareisn't specified but it's a little sketchy to have behavior based on if someone is listening since it limits adding wrappers that may or may not need it.Each takes a
ViewTransitionInstanceas an argument so you don't need a ref to animate it.The timing of this event is after the View Transition's
readystate which means that's too late to do any changes to the View Transition's snapshots but now both the new and old pseudo-elements are ready to animate.The order of
onExitis parent first, where as the others are child first. This mimics effect mount/unmount.I implement this by adding to a queue in the commit phase and then call it while we're finishing up the commit. This is after layout effects but before passive effects since passive effects fire after the animation is
finished.