Cancel view transitions in fire-and-forget too

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -1550,6 +1550,21 @@ export function hasInstanceAffectedParent(
   return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
 }
 
+function cancelAllViewTransitionAnimations(ownerDocument: Document) {
+  // In Safari, we need to manually cancel all manually start animations
+  // or it'll block or interfer with future transitions.
+  const animations = ownerDocument.getAnimations();
+  for (let i = 0; i < animations.length; i++) {
+    const anim = animations[i];
+    const effect: KeyframeEffect = (anim.effect: any);
+    // $FlowFixMe
+    const pseudo: ?string = effect.pseudoElement;
+    if (pseudo != null && pseudo.startsWith('::view-transition')) {
+      anim.cancel();
+    }
+  }
+}
+
 // How long to wait for new fonts to load before just committing anyway.
 // This freezes the screen. It needs to be short enough that it doesn't cause too much of
 // an issue when it's a new load and slow, yet long enough that you have a chance to load
@@ -1640,6 +1655,7 @@ export function startViewTransition(
     }
     transition.ready.then(spawnedWorkCallback, spawnedWorkCallback);
     transition.finished.then(() => {
+      cancelAllViewTransitionAnimations(ownerDocument);
       // $FlowFixMe[prop-missing]
       if (ownerDocument.__reactViewTransition === transition) {
         // $FlowFixMe[prop-missing]
@@ -1817,6 +1833,9 @@ export function startGestureTransition(
       }
       for (let i = 0; i < animations.length; i++) {
         const anim = animations[i];
+        if (anim.playState !== 'running') {
+          continue;
+        }
         const effect: KeyframeEffect = (anim.effect: any);
         // $FlowFixMe
         const pseudoElement: ?string = effect.pseudoElement;
@@ -1913,19 +1932,7 @@ export function startGestureTransition(
         : readyCallback;
     transition.ready.then(readyForAnimations, readyCallback);
     transition.finished.then(() => {
-      // In Safari, we need to manually cancel all manually start animations
-      // or it'll block future transitions.
-      const documentElement: Element = (ownerDocument.documentElement: any);
-      const animations = documentElement.getAnimations({subtree: true});
-      for (let i = 0; i < animations.length; i++) {
-        const anim = animations[i];
-        const effect: KeyframeEffect = (anim.effect: any);
-        // $FlowFixMe
-        const pseudo: ?string = effect.pseudoElement;
-        if (pseudo != null && pseudo.startsWith('::view-transition')) {
-          anim.cancel();
-        }
-      }
+      cancelAllViewTransitionAnimations(ownerDocument);
       // $FlowFixMe[prop-missing]
       if (ownerDocument.__reactViewTransition === transition) {
         // $FlowFixMe[prop-missing]