Repository: facebook/react
File: packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js (JavaScript)

Code before:
      const documentElement: Element = (ownerDocument.documentElement: any);
      // Loop through all View Transition Animations.
      const animations = documentElement.getAnimations({subtree: true});
      // First do a pass to collect all known group and new items so we can look
      // up if they exist later.
      const foundGroups: Set<string> = new Set();
      const foundNews: Set<string> = new Set();
      for (let i = 0; i < animations.length; i++) {
        // $FlowFixMe
        const pseudoElement: ?string = animations[i].effect.pseudoElement;
        if (pseudoElement == null) {
        } else if (pseudoElement.startsWith('::view-transition-group')) {
          foundGroups.add(pseudoElement.slice(23));
        } else if (pseudoElement.startsWith('::view-transition-new')) {
          // TODO: This is not really a sufficient detection because if the new
          // pseudo element might exist but have animations disabled on it.
          foundNews.add(pseudoElement.slice(21));
        }
      }
      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;
        if (
          pseudoElement != null &&
          pseudoElement.startsWith('::view-transition')
        ) {
          // Ideally we could mutate the existing animation but unfortunately
          // the mutable APIs seem less tested and therefore are lacking or buggy.
          // Therefore we create a new animation instead.
          anim.cancel();
          let isGeneratedGroupAnim = false;
          let isExitGroupAnim = false;
          if (pseudoElement.startsWith('::view-transition-group')) {
            const groupName = pseudoElement.slice(23);
            if (foundNews.has(groupName)) {
              // If this has both "new" and "old" state we expect this to be an auto-generated
              // animation that started outside the viewport. We need to adjust this first frame
              // to be inside the viewport.
              // $FlowFixMe[prop-missing]
              const animationName: ?string = anim.animationName;
              isGeneratedGroupAnim =
                animationName != null &&
                // $FlowFixMe[prop-missing]
                animationName.startsWith('-ua-view-transition-group-anim-');
            } else {
              // If this has only an "old" state then the pseudo element will be outside

Review comment (suggestion):
This alone doesn't really help anything because the "finished" animations seems to interfere regardless but we shouldn't really restart any animation here. We expect all of them to be running. So this is just defensive coding.

Code after:
    });
    // $FlowFixMe[prop-missing]
    ownerDocument.__reactViewTransition = transition;
    const readyCallback = (x: any) => {
      const documentElement: Element = (ownerDocument.documentElement: any);
      // Loop through all View Transition Animations.
      const animations = documentElement.getAnimations({subtree: true});
      // First do a pass to collect all known group and new items so we can look
      // up if they exist later.
      const foundGroups: Set<string> = new Set();
      const foundNews: Set<string> = new Set();
      for (let i = 0; i < animations.length; i++) {
        // $FlowFixMe
        const pseudoElement: ?string = animations[i].effect.pseudoElement;
        if (pseudoElement == null) {
        } else if (pseudoElement.startsWith('::view-transition-group')) {
          foundGroups.add(pseudoElement.slice(23));
        } else if (pseudoElement.startsWith('::view-transition-new')) {
          // TODO: This is not really a sufficient detection because if the new
          // pseudo element might exist but have animations disabled on it.
          foundNews.add(pseudoElement.slice(21));
        }
      }
      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;
        if (
          pseudoElement != null &&
          pseudoElement.startsWith('::view-transition') &&
          effect.target === documentElement
        ) {
          // Ideally we could mutate the existing animation but unfortunately
          // the mutable APIs seem less tested and therefore are lacking or buggy.
          // Therefore we create a new animation instead.
          anim.cancel();
          let isGeneratedGroupAnim = false;
          let isExitGroupAnim = false;
          if (pseudoElement.startsWith('::view-transition-group')) {
            const groupName = pseudoElement.slice(23);
            if (foundNews.has(groupName)) {
              // If this has both "new" and "old" state we expect this to be an auto-generated
              // animation that started outside the viewport. We need to adjust this first frame
              // to be inside the viewport.
              // $FlowFixMe[prop-missing]
              const animationName: ?string = anim.animationName;
              isGeneratedGroupAnim =