Reducing animation time

client/src/App.js

@@ -23,7 +23,7 @@ const needsHeaderFooter = {
 const Header = ({ show }) => (
   <CSSTransition 
     in={show}
-    timeout={1000}
+    timeout={500}
     mountOnEnter
     unmountOnExit
     classNames="state"
@@ -37,7 +37,7 @@ const Header = ({ show }) => (
 const Footer = ({ show }) => (
   <CSSTransition 
     in={show}
-    timeout={1000}
+    timeout={500}
     mountOnEnter
     unmountOnExit
     classNames="state"
@@ -51,7 +51,7 @@ const Footer = ({ show }) => (
 const State = ({ show, children, setTransitioning }) => (
   <CSSTransition
     in={show}
-    timeout={1000}
+    timeout={500}
     mountOnEnter
     unmountOnExit
     classNames="state"
@@ -65,7 +65,7 @@ const State = ({ show, children, setTransitioning }) => (
 )
 
 export default () => {
-  const [st, setSt] = useState(true);
+  const [transitioning, setTransitioning] = useState(true);
   const gameState = useGameState();
   useDirectGameLinks();
   const needsHF = needsHeaderFooter[gameState];
@@ -74,17 +74,17 @@ export default () => {
     <React.StrictMode>
       <div className={styles.page}>
         <Header show={needsHF} />
-        <State show={gameState === PRE_GAME} setTransitioning={setSt}>
+        <State show={gameState === PRE_GAME} setTransitioning={setTransitioning}>
           <HomePage />
         </State>
-        <State show={gameState === PRE_ROUND} setTransitioning={setSt}>
+        <State show={gameState === PRE_ROUND} setTransitioning={setTransitioning}>
           <Lobby />
         </State>
-        {!st && gameState === IN_ROUND && <GamePanel />}
-        <State show={gameState === POST_ROUND} setTransitioning={setSt}>
+        {!transitioning && gameState === IN_ROUND && <GamePanel />}
+        <State show={gameState === POST_ROUND} setTransitioning={setTransitioning}>
           <RoundSummary />
         </State>
-        <State show={gameState === POST_GAME} setTransitioning={setSt}>
+        <State show={gameState === POST_GAME} setTransitioning={setTransitioning}>
           <PlayerScores />
         </State>
         <State show={gameState === ERROR}>

client/src/index.css

@@ -62,7 +62,7 @@ button:disabled {
 
 .state-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 500ms;
 }
 
 .state-exit {
@@ -75,5 +75,5 @@ button:disabled {
   position: absolute;
   z-index: 1;
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 500ms;
 }