Added (test) page transitions

package.json

@@ -25,12 +25,13 @@
   "homepage": "https://github.com/YourWishes/domsPlaceNew#readme",
   "dependencies": {
     "babel-polyfill": "^6.26.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
     "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
-    "react-tap-event-plugin": "^3.0.2",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-tap-event-plugin": "^3.0.3",
+    "react-transition-group": "^2.3.1",
     "redux": "^4.0.0"
   },
   "devDependencies": {

public/App.jsx

@@ -25,12 +25,8 @@ import React from 'react';
 import Background from './background/Background';
 import Header from './header/Header';
 import Footer from './footer/Footer';
-import { HashRouter, Route, Switch } from 'react-router-dom';
-
-//Pages
-import Homepage from './page/home/Homepage';
-import AboutPage from './page/about/AboutPage';
-import ContactPage from './page/contact/ContactPage';
+import { HashRouter } from 'react-router-dom';
+import Routes from './page/Routes';
 
 class App extends React.Component {
   constructor(props) {
@@ -43,16 +39,7 @@ class App extends React.Component {
         <div className="o-app">
           <Background style="normal" />
           <Header />
-
-          <main className="o-main">
-            <Switch>
-              <Route exact path="/" component={ Homepage } />
-              <Route exact path="/about" component={ AboutPage } />
-              <Route exact path="/contact" component={ ContactPage } />
-            </Switch>
-          </main>
-
-          <Footer />
+          <Routes />
         </div>
       </HashRouter>
     );

public/page/Routes.jsx

@@ -0,0 +1,82 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types'
+import { HashRouter, Route, Switch } from 'react-router-dom';
+
+import Footer from './../footer/Footer';
+
+//Pages
+import Homepage from './home/Homepage';
+import AboutPage from './about/AboutPage';
+import ContactPage from './contact/ContactPage';
+
+const RouteWrapper = (props) => {
+  let newProps = Object.assign({}, props);
+  return (
+    <Route {...props} render={() => {
+        let CustomTag = props.page;
+        console.log(props);
+        return (
+          <main className="o-main">
+            <CustomTag />
+            <Footer />
+          </main>
+        );
+    }}/>
+  );
+};
+
+const Routes = ({location}) => {
+  return (
+    <TransitionGroup className="o-page-transition__container">
+      <CSSTransition
+        key={ location.pathname }
+        timeout={1000}
+        classNames="o-page-transition"
+        mountOnEnter={ true }
+        unmountOnExit={ true }
+        onEntering={() => {
+          window.scroll({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+          });
+        }}
+      >
+        <Switch location={ location }>
+          <RouteWrapper exact path="/" page={ Homepage } />
+          <RouteWrapper exact path="/about" page={ AboutPage } />
+          <RouteWrapper exact path="/contact" page={ ContactPage } />
+        </Switch>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};
+
+export default withRouter(() => {
+  return <Route render={Routes} />
+});

public/styles/components/_footer.scss

@@ -21,7 +21,6 @@ $c-footer--shadow: 1.5em;
   &__inner {
     text-align: center;
     position: relative;
-    z-index: 10;
     padding: 1em 0;
   }
 

public/styles/components/_page.scss

@@ -9,8 +9,7 @@
  *    1.0.0 - 2018/05/05
  */
 .c-page {
-  //padding-bottom: 5em;
-
+  @include t-flex-grow(1);
   &__boundary {
     max-width: $s-screen-boundary;
     margin: 0 auto;

public/styles/elements/_body.scss

@@ -15,4 +15,5 @@ body {
 
   font-family: $s-font--stack-default;
   font-size: $s-font--size--base;
+  overflow-y: scroll;//Really makes the transitions feel smoother
 }

public/styles/index.scss

@@ -69,6 +69,7 @@
 @import './objects/_input.scss';
 @import './objects/_loader.scss';
 @import './objects/_navbar.scss';
+@import './objects/_page-transition.scss';
 @import './objects/_title.scss';
 @import './objects/_video.scss';
 

public/styles/objects/_page-transition.scss

@@ -0,0 +1,57 @@
+/*
+ *  Page Transition
+ *    Provides the transitions for all page changing.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/08
+ */
+@include t-keyframes(o-page-transition--exit) {
+ from {
+   @include t-translate-x(0%);
+ }
+
+ to {
+   @include t-translate-x(100%);
+ }
+}
+
+.o-page-transition__container {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.o-page-transition {
+
+  &-enter {
+    &-active {
+      position: absolute;
+      width: 100%;
+      top: 0;
+    }
+
+    &-done {
+    }
+  }
+
+  &-exit {
+    &-active {
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: $s-color--background;
+      @include t-animation-timing-function($s-animation--ease-in-out);
+      @include t-animation-name(o-page-transition--exit);
+      @include t-animation-duration(1s);
+      @include t-animation-fill-mode(forwards);
+      z-index: $s-z--transition;
+    }
+
+    &-done {
+
+    }
+  }
+}

public/styles/objects/main.scss

@@ -6,5 +6,10 @@
  *    1.0.0 - 2018/05/07
  */
 .o-main {
-  @include t-flex-grow(1);
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+
+  @extend %t-flexbox;
+  @include t-flex-direction(column);
 }

public/styles/settings/z.scss

@@ -8,3 +8,4 @@
 
 $s-z--background: -1;
 $s-z--navbar: 10;   //Navbar
+$s-z--transition: 1;//The Z-Index of an element in transition