Add the suffix to cancelled view transition names (#35485)
When a View Transition might not need to update we add it to a queue. If the parent are able to be reverted, we then cancel the already started view transitions. We do this by adding an animation that hides the "old" state and remove the view transition name from the old state. There was a bug where if you have more than one child in a `<ViewTransition>` we didn't add the right suffix to the name we added in the queue so it wasn't adding an animation that hides the old state. The effect was that it playing an exit animation instead of being cancelled.
Sebastian Markbåge committed
Jan 14, 2026 at 10:00 UTC
4a3d993e52fd6bcadd9c3029c75df3c22684f69c
1 file changed
+5
-1
packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
+5
-1
@@ -711,7 +711,11 @@ function measureViewTransitionHostInstancesRecursive(
711
}
712
viewTransitionCancelableChildren.push(
713
instance,
714
- oldName,
714
+ viewTransitionHostInstanceIdx === 0
715
+ ? oldName
716
+ : // If we have multiple Host Instances below, we add a suffix to the name to give
717
+ // each one a unique name.
718
+ oldName + '_' + viewTransitionHostInstanceIdx,
719
child.memoizedProps,
720
);
721
}