Updated page transitions, upgraded dependencies.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "domsplace",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Personal website for Dominic \"YouWish\" Masters.",
   "main": "dist/private/",
   "scripts": {
@@ -29,16 +29,16 @@
   "dependencies": {
     "@types/animejs": "^2.0.2",
     "@yourwishes/app-email": "^1.0.3",
-    "@yourwishes/app-simple-react": "^2.7.0",
+    "@yourwishes/app-simple-react": "^2.8.7",
     "animejs": "^3.0.1",
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.9",
+    "@types/jest": "^24.0.15",
     "cross-env": "^5.2.0",
     "jest": "^24.1.0",
-    "typescript": "^3.3.3333",
+    "typescript": "^3.5.3",
-    "webpack-cli": "^3.2.3",
+    "webpack-cli": "^3.3.5",
     "webpack-dev-middleware": "^3.6.1",
     "webpack-hot-middleware": "^2.24.3"
   }

src/public/components/layout/header/index.tsx

@@ -32,8 +32,7 @@ import './styles.scss';
 export const Links = [
   { title: 'Home', exact: true, to: '/' },
   { title: 'About', exact: true, to: '/about' },
-  { title: 'Blog', exact: true, to: '/blog' },
+  { title: 'Blog', exact: true, to: '/blog' }
-  { title: 'Contact', to: '/contact' }
 ];
 
 

src/public/components/layout/layout/index.tsx

@@ -24,7 +24,7 @@
 
 import * as React from 'react';
 import { History } from 'history';
-import { AnimatedSwitch, Router } from '@yourwishes/app-simple-react/dist/public';
+import { AnimatedSwitch, Router, Link } from '@yourwishes/app-simple-react/dist/public';
 import { StarBackground } from './../../background/stars/';
 import { Header } from './../header/';
 import { Footer } from './../footer/';
@@ -32,6 +32,7 @@ import { Page } from './../../page/';
 
 import './styles.scss';
 
+const CLASS_ROUTE_CHANGE = 'is-route-changing';
 
 //Paths (this will generate the necessary pages)
 export interface LayoutProps {
@@ -48,14 +49,23 @@ export class LayoutComponent extends React.Component<LayoutProps> {
   //We use these to let the body know we're changing routes, which is a fake
   //way of stopping a user changing the route mid transition.
   onTransitionStart() {
-    document.body.classList.add('is-route-changing');
+    if(document.body.classList.contains(CLASS_ROUTE_CHANGE)) return;
+    console.log('Transition Start');
+    document.body.classList.add(CLASS_ROUTE_CHANGE);
   }
 
   onTransitionEnd() {
-    document.body.classList.remove('is-route-changing');
+    if(!document.body.classList.contains(CLASS_ROUTE_CHANGE)) return;
+    console.log('Transition End');
+    document.body.classList.remove(CLASS_ROUTE_CHANGE);
   }
 
   render() {
+    let PageProps = {
+      onEnter: e => this.onTransitionStart(),
+      onEntered: e => this.onTransitionEnd(),
+      timeout: 2*1000
+    }
     return (
       <Router history={this.props.history}>
         <>
@@ -67,20 +77,16 @@ export class LayoutComponent extends React.Component<LayoutProps> {
               <Header className="c-layout__header" />
 
               <div className="c-layout__view" ref={e => this.view = e}>
-                <AnimatedSwitch
+                <AnimatedSwitch>
-                  timeout={1000} classNames="c-page__transition"
+                  <Page {...PageProps} exact path="/" name="home" />
-                  onEntering={() => this.onTransitionStart()}
+                  <Page {...PageProps} exact path="/about" name="about" />
-                  onEntered={() => this.onTransitionEnd()}
+                  <Page {...PageProps} exact path="/contact" name="contact" />
-                >
+                  <Page {...PageProps} exact path="/projects" name="projects" />
-                  <Page exact path="/" name="home" />
-                  <Page exact path="/about" name="about" />
-                  <Page exact path="/contact" name="contact" />
-                  <Page exact path="/projects" name="projects" />
 
-                  <Page exact path="/legal/privacy" name="privacy" />
+                  <Page {...PageProps} exact path="/legal/privacy" name="privacy" />
 
-                  <Page exact path="/blog" name="blog" />
+                  <Page {...PageProps} exact path="/blog" name="blog" />
-                  <Page exact path="/blog/article/:handle" name="article" />
+                  <Page {...PageProps} exact path="/blog/article/:handle" name="article" />
                 </AnimatedSwitch>
               </div>
             </div>
@@ -90,6 +96,6 @@ export class LayoutComponent extends React.Component<LayoutProps> {
           </div>
         </>
       </Router>
-    )
+    );
   }
 }

src/public/components/layout/layout/styles.scss

@@ -13,6 +13,10 @@ $c-layout--menu-width: 275px;
   &__header,&__footer { width: 100%; }
   &__view { position: relative; }
 
+  &__inner {
+    body.is-route-changing & { overflow: hidden; }
+  }
+
   @include t-media-query($s-xsmall-up) {
     display: flex;
     flex-direction: column;
@@ -41,5 +45,5 @@ $c-layout--menu-width: 275px;
 
 
   //Entering transition
-  &.is-not-ready { opacity: 0; }
+  //&.is-not-ready { opacity: 0; }
 }

src/public/components/page/index.tsx

@@ -31,13 +31,13 @@ import './styles.scss';
 
 //Title can be either a string (a title), or null (to indicate that this is a
 //title-less page (e.g. the Home Page would be considered title-less)
-export interface PageProps extends AnimatedRouteProps<any> {
+export interface PageProps extends AnimatedRouteProps {
   name:string,
   load?:undefined
 }
 
-export class PageAnimatedRouteWrapper extends React.Component<PageProps> {
+export class PageAnimatedRouteWrapper extends React.Component<any> {
-  constructor(props:PageProps) {
+  constructor(props:any) {
     super(props);
   }
 
@@ -63,7 +63,7 @@ export const PageLoading = () => {
   );
 };
 
-export class Page extends React.Component<PageProps> {
+export class Page extends React.Component<any> {
   constructor(props:PageProps) {
     super(props);
   }
@@ -72,9 +72,13 @@ export class Page extends React.Component<PageProps> {
     let { name } = this.props;
 
     return <AnimatedRoute
-      {...this.props} load={() => import(`./../../pages/${name}/`)}
+      {...this.props} className={`c-page--${name} p-${name}`}
-      loadKey={`pages/${name}`} className={`c-page--${name} p-${name}`}
+
-      animateWrapper={PageAnimatedRouteWrapper as any} loading={PageLoading}
+      animateWrapper={PageAnimatedRouteWrapper as any}
+      classNames="c-page__transition"
+
+      loading={PageLoading} loadKey={`pages/${name}`}
+      load={() => import(`./../../pages/${name}/`)}
     />;
   }
 }

src/public/components/page/styles.scss

@@ -14,8 +14,7 @@
   &__transition {
     //Define the timings, both enter and exit should share timings.
     &-enter,&-exit {
-      transition: 1s $s-animation--ease-in-out;
+      transition: all $s-animation--time-extended $s-animation--ease-in-out;
-
       &-active .c-page__effect { overflow-y: visible; }
     }
 
@@ -25,20 +24,21 @@
 
       &-active {
         transform: translateY(0);
-        .c-page__effect { overflow-y: visible; }
+        .c-page__effect { overflow-y: hidden; }
       }
     }
 
-    /*&-exit {
+    &-exit {
       position: absolute;
       transform: translateY(0%);
       top: 0;
       left: 0;
+      opacity: 1;
 
       &-active {
         transform: translateY(-100vh);
         opacity: 0;
       }
-    }*/
+    }
   }
 }

src/public/objects/page/effect/styles.scss

@@ -14,11 +14,23 @@
 
 .o-page-effect {
   opacity: 0;
+  transform: translateY(1vh);
+  transition:
+    opacity $s-animation--time-long $s-animation--ease-out,
+    transform $s-animation--time-long $s-animation--ease-out
+  ;
+  transition-delay: 200ms;
 
-  &.is-loading { opacity: 1; }
+  &.is-loading {
+    transition: none;
+    opacity: 1;
+    transform: translateY(0);
+  }
 
   &.is-loaded {
-    animation: o-page-effect--fade-in forwards $s-animation--time-long $s-animation--ease-out;
+    opacity: 1;
-    animation-delay: $s-animation--time-long;//Animation delay to try and hide the "flicker" when a component loads
+    transform: translate(0);
+    //animation: o-page-effect--fade-in forwards $s-animation--time-long $s-animation--ease-out;
+    //animation-delay: $s-animation--time-long;//Animation delay to try and hide the "flicker" when a component loads
   }
 }

src/public/pages/article/index.tsx

@@ -42,18 +42,29 @@ export interface ArticleProps {
 
 export const ArticleLoader = (props:ArticleProps) => <Loader />;
 
-export class ArticlePage extends React.Component<any> {
+export interface ArticlePageState {
+  handle:string
+}
+
+export class ArticlePage extends React.Component<any, ArticlePageState> {
   constructor(props:any) {
     super(props);
+
+    let handle = '';
+    if(props && props.match && props.match.params) {
+      handle = props.match.params.handle || handle;
+    }
+
+    this.state = { handle };
   }
 
   render() {
+    console.log('Rendering');
     //Find article by handle
     let article:BlogArticle;
 
-    let handle = this.props.match.params.handle as string;
+    let handle = this.state.handle;
     if(handle && handle.length) article = getArticleByHandle(handle);
-
     if(!article) return <NotFoundPage />;
 
     let url = getArticleURL(article);

src/public/pages/home/index.tsx

@@ -33,7 +33,7 @@ export interface NavBoxProps extends ImageProps, RouteComponentProps {
   to:string
 };
 
-export const NavBox = withRouter<NavBoxProps>((props:NavBoxProps) => {
+export const NavBox = withRouter<NavBoxProps,any>((props:NavBoxProps) => {
   let { to, location, alt } = props
   if(location.pathname.indexOf(to) === 0) to = "/";
   return (

src/public/styles/settings/animation.scss

@@ -9,4 +9,5 @@ $s-animation--ease-out: $s-animation--ease-out-quart;
 $s-animation--time-fast: 0.2s;
 $s-animation--time-medium: 0.4s;
 $s-animation--time-long: 0.8s;
+$s-animation--time-extended: 2s;
 $s-animation--time-very-long: 4s;