working on some animation stuff

Author: bradwestfall

package-lock.json

@@ -39,6 +39,7 @@
     "react": "^16.7.0-alpha.2",
     "react-dom": "^16.7.0-alpha.2",
     "react-flex-columns": "^0.4.2",
-    "react-router-dom": "^5.0.0"
+    "react-router-dom": "^5.0.0",
+    "react-transition-group": "^4.1.1"
   }
 }

package.json

@@ -1,13 +1,14 @@
 import React, { Fragment } from 'react'
 import { Switch, Route, Redirect } from 'react-router-dom'
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import Panel from '../../ui/Panel'
 import PageHeader from '../../ui/PageHeader'
 import { PageHeaderTabs, Tab } from '../../ui/PageHeaderTabs'
 import Users from './Users'
 import SigninMethods from './SigninMethods'
 import Templates from './Templates'
 
-const AuthenticationLayout = ({ match }) => {
+const AuthenticationLayout = ({ match, location }) => {
   return (
     <Fragment>
       <PageHeader title="Authentication" useMaxWidth={false}>
@@ -18,12 +19,16 @@ const AuthenticationLayout = ({ match }) => {
         </PageHeaderTabs>
       </PageHeader>
       <Panel>
-        <Switch>
-          <Route path={`${match.path}/users`} component={Users} />
-          <Route path={`${match.path}/signin-method`} component={SigninMethods} />
-          <Route path={`${match.path}/templates`} component={Templates} />
-          <Redirect to={`${match.url}/users`} />
-        </Switch>
+        <TransitionGroup>
+          <CSSTransition key={location.key} timeout={3000} classNames="page-transition">
+            <Switch location={location}>
+              <Route path={`${match.path}/users`} component={Users} />
+              <Route path={`${match.path}/signin-method`} component={SigninMethods} />
+              <Route path={`${match.path}/templates`} component={Templates} />
+              <Redirect to={`${match.url}/users`} />
+            </Switch>
+          </CSSTransition>
+        </TransitionGroup>
       </Panel>
     </Fragment>
   )

src/projects/authentication/AuthenticationLayout.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Card from '../../ui/Card'
 
 const Users = () => {
-  return <Card style={{ height: '20em' }}>Useres</Card>
+  return <Card style={{ height: '20em' }}>Users</Card>
 }
 
 export default Users

src/projects/authentication/Users.js

@@ -5,3 +5,30 @@
   padding: 1em;
   min-height: 3em;
 }
+
+// .card {
+//   position: absolute;
+//   background-color: red;
+// }
+
+// .page-transition {
+//   &-enter {
+//     opacity: 0;
+//     transform: translateX(-10em);
+//     transition: all 1s;
+//   }
+//   &-enter-active {
+//     opacity: 1;
+//     transform: translateX(0);
+//   }
+
+//   &-exit {
+//     opacity: 1;
+//     transform: translateX(10em);
+//     transition: all 1s;
+//   }
+//   &-exit-active {
+//     opacity: 0;
+//     transform: translateX(0);
+//   }
+// }