Add example using View Transition Classes and CSS Modules

I did have to rename my classes because there's a bug where generated
CSS Module class names can have the `+` character in them which is invalid
for View Transition Class Names.

Author: sebmarkbage

fixtures/view-transition/src/components/Page.js

@@ -8,6 +8,8 @@ import React, {
 
 import './Page.css';
 
+import transitions from './Transitions.module.css';
+
 const a = (
   <div key="a">
     <ViewTransition>
@@ -24,6 +26,17 @@ const b = (
   </div>
 );
 
+function Component() {
+  return (
+    <ViewTransition
+      className={
+        transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']
+      }>
+      <p>Slide In from Left, Slide Out to Right</p>
+    </ViewTransition>
+  );
+}
+
 export default function Page() {
   const [show, setShow] = useState(false);
   useEffect(() => {
@@ -70,6 +83,7 @@ export default function Page() {
           <div>!!</div>
         </ViewTransition>
       </Activity>
+      {show ? <Component /> : null}
     </div>
   );
 }

fixtures/view-transition/src/components/Transitions.module.css

@@ -0,0 +1,28 @@
+@keyframes enter-slide-right {
+  0% {
+    opacity: 0;
+    translate: -200px 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes exit-slide-left {
+  0% {
+    opacity: 1;
+    translate: 0 0;
+  }
+  100% {
+    opacity: 0;
+    translate: 200px 0;
+  }
+}
+
+::view-transition-new(.enter-slide-right):only-child {
+  animation: enter-slide-right ease-in 0.25s;
+}
+::view-transition-old(.exit-slide-left):only-child {
+  animation: exit-slide-left ease-in 0.25s;
+}