Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ export function trackAppearingViewTransition(
appearingViewTransitions.set(name, state);
}

export function trackEnterViewTransitions(placement: Fiber): void {
if (
placement.tag === ViewTransitionComponent ||
(placement.subtreeFlags & ViewTransitionStatic) !== NoFlags
) {
// If an inserted or appearing Fiber is a ViewTransition component or has one as
// an immediate child, then that will trigger as an "Enter" in future passes.
// We don't do anything else for that case in the "before mutation" phase but we
// still have to mark it as needing to call startViewTransition if nothing else
// updates.
shouldStartViewTransition = true;
}
}

// We can't cancel view transition children until we know that their parent also
// don't need to transition.
export let viewTransitionCancelableChildren: null | Array<
Expand Down Expand Up @@ -119,7 +133,6 @@ function applyViewTransitionToHostInstancesRecursive(
let inViewport = false;
while (child !== null) {
if (child.tag === HostComponent) {
shouldStartViewTransition = true;
const instance: Instance = child.stateNode;
if (collectMeasurements !== null) {
const measurement = measureInstance(instance);
Expand All @@ -132,6 +145,7 @@ function applyViewTransitionToHostInstancesRecursive(
inViewport = true;
}
}
shouldStartViewTransition = true;
applyViewTransitionName(
instance,
viewTransitionHostInstanceIdx === 0
Expand Down
7 changes: 7 additions & 0 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ import {
commitFragmentInstanceInsertionEffects,
} from './ReactFiberCommitHostEffects';
import {
trackEnterViewTransitions,
commitEnterViewTransitions,
commitExitViewTransitions,
commitBeforeUpdateViewTransition,
Expand Down Expand Up @@ -338,6 +339,9 @@ function commitBeforeMutationEffects_begin(isViewTransitionEligible: boolean) {
// to trigger updates of any nested view transitions and we shouldn't
// have any other before mutation effects since snapshot effects are
// only applied to updates. TODO: Model this using only flags.
if (isViewTransitionEligible) {
trackEnterViewTransitions(fiber);
}
commitBeforeMutationEffects_complete(isViewTransitionEligible);
continue;
}
Expand Down Expand Up @@ -367,6 +371,9 @@ function commitBeforeMutationEffects_begin(isViewTransitionEligible: boolean) {
// to trigger updates of any nested view transitions and we shouldn't
// have any other before mutation effects since snapshot effects are
// only applied to updates. TODO: Model this using only flags.
if (isViewTransitionEligible) {
trackEnterViewTransitions(fiber);
}
commitBeforeMutationEffects_complete(isViewTransitionEligible);
continue;
}
Expand Down
Loading