animated cards

Author: bradwestfall

src/projects/authentication/AuthenticationLayout.js

@@ -11,6 +11,7 @@ import Templates from './Templates'
 const AuthenticationLayout = ({ match, location }) => {
   return (
     <Fragment>
+      {match.url === location.pathname && <Redirect to={`${match.url}/users`} />}
       <PageHeader title="Authentication" useMaxWidth={false}>
         <PageHeaderTabs>
           <Tab to={`${match.url}/users`}>Users</Tab>
@@ -19,13 +20,13 @@ const AuthenticationLayout = ({ match, location }) => {
         </PageHeaderTabs>
       </PageHeader>
       <Panel>
-        <TransitionGroup>
-          <CSSTransition key={location.key} timeout={3000} classNames="page-transition">
+        <TransitionGroup className="animated-cards">
+          <CSSTransition key={location.key} timeout={600} classNames="animated-card">
             <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`} />
+              <Route component={() => null} />
             </Switch>
           </CSSTransition>
         </TransitionGroup>

src/projects/database/DatabaseLayout.js

@@ -1,15 +1,17 @@
 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 Data from './Data'
 import Rules from './Rules'
 import DataIndexes from './DataIndexes'
 
-const DatabaseLayout = ({ match }) => {
+const DatabaseLayout = ({ match, location }) => {
   return (
     <Fragment>
+      {match.url === location.pathname && <Redirect to={`${match.url}/data`} />}
       <PageHeader title="Database" useMaxWidth={false}>
         <PageHeaderTabs>
           <Tab to={`${match.url}/data`}>Data</Tab>
@@ -18,12 +20,16 @@ const DatabaseLayout = ({ match }) => {
         </PageHeaderTabs>
       </PageHeader>
       <Panel>
-        <Switch>
-          <Route path={`${match.path}/data`} component={Data} />
-          <Route path={`${match.path}/rules`} component={Rules} />
-          <Route path={`${match.path}/indexes`} component={DataIndexes} />
-          <Redirect to={`${match.url}/data`} />
-        </Switch>
+        <TransitionGroup className="animated-cards">
+          <CSSTransition key={location.key} timeout={600} classNames="animated-card">
+            <Switch>
+              <Route path={`${match.path}/data`} component={Data} />
+              <Route path={`${match.path}/rules`} component={Rules} />
+              <Route path={`${match.path}/indexes`} component={DataIndexes} />
+              <Route component={() => null} />
+            </Switch>
+          </CSSTransition>
+        </TransitionGroup>
       </Panel>
     </Fragment>
   )

src/styles/ui/card.scss

@@ -6,29 +6,32 @@
   min-height: 3em;
 }
 
-// .card {
-//   position: absolute;
-//   background-color: red;
-// }
+.animated-cards {
+  position: relative;
 
-// .page-transition {
-//   &-enter {
-//     opacity: 0;
-//     transform: translateX(-10em);
-//     transition: all 1s;
-//   }
-//   &-enter-active {
-//     opacity: 1;
-//     transform: translateX(0);
-//   }
+  > * {
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.animated-card {
+  &-exit {
+    opacity: 1;
+    transition: all 0.6s;
+  }
+  &-exit-active {
+    opacity: 0;
+    transform: translateY(3em);
+  }
 
-//   &-exit {
-//     opacity: 1;
-//     transform: translateX(10em);
-//     transition: all 1s;
-//   }
-//   &-exit-active {
-//     opacity: 0;
-//     transform: translateX(0);
-//   }
-// }
+  &-enter {
+    opacity: 0;
+    transition: all 0.6s;
+    transform: translateY(-1em);
+  }
+  &-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}