Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
View Transition Events (facebook#32041)
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`, `onShare` and `onUpdate`. We could potentially do something like fire `onUpdate` if `onLayout` or `onShare` isn'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 `ViewTransitionInstance` as an argument so you don't need a ref to animate it. ```js <ViewTransition onEnter={inst => inst.new.animate(keyframes, options)}> ``` The timing of this event is after the View Transition's `ready` state 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 `onExit` is 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`. DiffTrain build for [540efeb](facebook@540efeb)
- Loading branch information