implement splashscreen

src/PageManager.css

@@ -21,37 +21,58 @@
   left: 0;  
   height: 100%;
   width: 100%;  
+  will-change:transform;
 }
 
+
+
+.splash {
+  z-index: 1000;
+  will-change:opacity;
+}
+
+.splash.splash-enter {
+  transition: opacity 0.5s;
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.splash.splash-enter.splash-enter-active {
+  opacity: 0;  
+}
+
+
+
+
 .page-appear-active,
 .page-enter-active {
-  transition: all 0.5s;
+  transition: transform 0.5s;
 }
 
 .page-exit {
-  transition: all 0.5s;
-  transform: translateX(0);
+  transition: transform 0.5s;
+  transform: translate3d(0, 0, 0);
 }
 
 
 
 .left .page-appear,
 .left .page-enter {
-  transform: translateX(-100%);
+  transform: translate3d(-100%, 0, 0);
 }
 
 .left .page-appear-active,
 .left .page-enter-active {
-  transform: translateX(0)
+  transform: translate3d(0, 0, 0)
 }
 
 .left .page-exit,
 .left .page-exit {
-  transform: translateX(0)
+  transform: translate3d(0, 0, 0)
 }
 
 .left .page-exit-active {
-  transform: translateX(100%);
+  transform: translate3d(100%, 0, 0);
 }
 
 

src/PageManager.js

@@ -8,12 +8,37 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import Page from './Page'
 import NavigationBar from './NavigationBar'
 import ForbiddenPage from './ForbiddenPage'
+import SplashScreen from './SplashScreen'
 
 import './PageManager.css';
 
+const timeout = { enter: 500, exit: 500 };
+
 export class PageManager extends Component {
-	state = {
-		direction: 0
+	constructor(props) {
+		super(props)
+
+		this.state = {
+			direction: 0,
+			hideSplash: false,
+			renderSplash: this.props.children.find( c => c.type === SplashScreen ) !== undefined,
+		}
+
+	}
+
+	componentDidMount() {
+		if (this.state.renderSplash) {
+			setTimeout(() => {
+				this.setState({
+					hideSplash: true,
+				})
+				setTimeout(() => {
+					this.setState({
+						renderSplash: false
+					})
+				}, timeout.exit)	
+			}, 3000)	
+		}
 	}
 
 	componentWillReceiveProps(nextProps) {
@@ -37,16 +62,18 @@ export class PageManager extends Component {
 	render() {
 		const { children, location } = this.props
 		const currentKey = location.pathname.split("/")[1] || "/";
-		const timeout = { enter: 500, exit: 500 };
-		const routes = children.filter( c => c.type === Page )
-		const animatedPages = routes.filter( r => !r.props.noAnim )
-		const notAnimatedPages = routes.filter( r => r.props.noAnim )
-		const hideNavbarPath = routes.filter( r => r.props.hideNavbar ).map(r => r.props.path)
-
-		const pages = routes.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
-		const navbars = children.filter(child => child.type === NavigationBar )
 
+		const pages = children.filter( c => c.type === Page )
+		const navbars = children.filter(child => child.type === NavigationBar )		
 		const forbiddenPage = children.find( c => c.type === ForbiddenPage )		
+		const splashScreen = children.find( c => c.type === SplashScreen )		
+
+		const animatedPages = pages.filter( r => !r.props.noAnim )
+		const notAnimatedPages = pages.filter( r => r.props.noAnim )
+		const hideNavbarPath = pages.filter( r => r.props.hideNavbar ).map(r => r.props.path)
+		const navbarPageInfos = pages.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
+
+
 
 		const renderPages = (pages) => pages.map((page, i) => {
 			const { exact, path, ...props } = page.props
@@ -62,6 +89,13 @@ export class PageManager extends Component {
 
 		return (
 			<div className="page-container">
+				<section className={"page-inner"}>
+					<Switch location={location}>
+					{
+						renderPages(notAnimatedPages)
+					}
+					</Switch>
+				</section>
 				<TransitionGroup component="div" className={(this.state.direction >= 0 ? "right" : "left")}>
 					<CSSTransition
 						key={currentKey}
@@ -74,20 +108,22 @@ export class PageManager extends Component {
 							{
 								renderPages(animatedPages)
 							}
-							</Switch>
+							</Switch>	
 						</section>
 					</CSSTransition>
-				</TransitionGroup>								
-				<section className={"page-inner"}>
-					<Switch location={location}>
-					{
-						renderPages(notAnimatedPages)
-					}
-					</Switch>
-				</section>
+				</TransitionGroup>
 				{ hideNavbarPath.indexOf(location.pathname) === -1 && navbars.map((navbar, k) => {
-					return React.cloneElement(navbar, { pages, key: k })
+					return React.cloneElement(navbar, { pages: navbarPageInfos, key: k })
 				}) }
+				{ this.state.renderSplash ? (
+				<CSSTransition
+					timeout={timeout}
+					in={this.state.hideSplash}
+					classNames="splash"
+				>
+					{ splashScreen }
+				</CSSTransition>
+				): null }
 			</div>
 		);
 	}

src/SplashScreen.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children, ...props }) => (
+    <div style={ props.style } className="page splash">
+        { children }
+    </div>
+)

src/index.js

@@ -9,7 +9,7 @@ import PageManager from './PageManager'
 import Page from './Page'
 import NavigationBar from './NavigationBar'
 import ForbiddenPage from './ForbiddenPage'
-
+import SplashScreen from './SplashScreen'
 
 ReactDOM.render(
 <div>
@@ -19,6 +19,7 @@ ReactDOM.render(
             return true
         }}
     >
+        <SplashScreen style={{ background: 'black' }}  />
         <Page style={{ background: 'yellow' }} name="splash" exact path="/" noAnim noNavbar hideNavbar >
             <h1>Splash</h1>
         </Page>