From bcf15db4936539e31bbab3a1bbc1176f422b6f9a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 10 Jan 2025 12:24:23 -0500
Subject: [PATCH] Update fixture

---
 .../view-transition/src/components/Page.js    | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
index 8a3638b01f4b3..8204643a3ec2f 100644
--- a/fixtures/view-transition/src/components/Page.js
+++ b/fixtures/view-transition/src/components/Page.js
@@ -1,8 +1,6 @@
 import React, {
   unstable_ViewTransition as ViewTransition,
   unstable_Activity as Activity,
-  useRef,
-  useLayoutEffect,
 } from 'react';
 
 import './Page.css';
@@ -37,21 +35,17 @@ function Component() {
 }
 
 export default function Page({url, navigate}) {
-  const ref = useRef();
   const show = url === '/?b';
-  useLayoutEffect(() => {
-    const viewTransition = ref.current;
-    requestAnimationFrame(() => {
-      const keyframes = [
-        {rotate: '0deg', transformOrigin: '30px 8px'},
-        {rotate: '360deg', transformOrigin: '30px 8px'},
-      ];
-      viewTransition.old.animate(keyframes, 300);
-      viewTransition.new.animate(keyframes, 300);
-    });
-  }, [show]);
+  function onTransition(viewTransition) {
+    const keyframes = [
+      {rotate: '0deg', transformOrigin: '30px 8px'},
+      {rotate: '360deg', transformOrigin: '30px 8px'},
+    ];
+    viewTransition.old.animate(keyframes, 250);
+    viewTransition.new.animate(keyframes, 250);
+  }
   const exclamation = (
-    <ViewTransition name="exclamation">
+    <ViewTransition name="exclamation" onShare={onTransition}>
       <span>!</span>
     </ViewTransition>
   );
@@ -76,7 +70,7 @@ export default function Page({url, navigate}) {
               {a}
             </div>
           )}
-          <ViewTransition ref={ref}>
+          <ViewTransition>
             {show ? <div>hello{exclamation}</div> : <section>Loading</section>}
           </ViewTransition>
           <p>scroll me</p>