Update fixture

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>