Add skipInitialTransition prop (#29)

* Added skipInitialTransition prop * Updated README.md to contain info about skipInitialTransition prop * Added example called skip-initial-transition
illinois · Mar 14, 2019 · 72f761f · 72f761f
1 parent 8c353e7
commit 72f761f
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -237,6 +237,10 @@ to gain a deeper sense of how this component works.
   so that programmatic scrolling can be disabled while a page is transitioning
   out. Defaults to false, since this potentially sketchy behavior should be
   opt-in.
+* **`skipInitialTransition`**: Specifies if page transition will be omitted on
+  first mount. If you want to have transitions only between pages, not on 
+  first page load, set `skipInitialTransition` to `true`. By default, 
+  `skipInitialTransition` is set to `false`.
 
 ### Contributing
 

diff --git a/examples/skip-initial-transition/.babelrc b/examples/skip-initial-transition/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
diff --git a/examples/skip-initial-transition/package.json b/examples/skip-initial-transition/package.json
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "next": "^8.0.3",
+    "next-page-transitions": "*",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}
diff --git a/examples/skip-initial-transition/pages/_app.js b/examples/skip-initial-transition/pages/_app.js
@@ -0,0 +1,45 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+
+import { PageTransition } from 'next-page-transitions'
+
+export default class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <PageTransition skipInitialTransition={true} timeout={300} classNames="page-transition">
+          <Component {...pageProps} />
+        </PageTransition>
+        <style jsx global>{`
+          .page-transition-enter {
+            opacity: 0;
+            transform: translate3d(0, 20px, 0);
+          }
+          .page-transition-enter-active {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition: opacity 300ms, transform 300ms;
+          }
+          .page-transition-exit {
+            opacity: 1;
+          }
+          .page-transition-exit-active {
+            opacity: 0;
+            transition: opacity 300ms;
+          }
+        `}</style>
+      </Container>
+    )
+  }
+}
diff --git a/examples/skip-initial-transition/pages/_document.js b/examples/skip-initial-transition/pages/_document.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+          <meta
+            name="viewport"
+            content="initial-scale=1.0, width=device-width"
+          />
+          <link
+            rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
+            integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
+            crossOrigin="anonymous"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/skip-initial-transition/pages/about.js b/examples/skip-initial-transition/pages/about.js
@@ -0,0 +1,20 @@
+import React, { Fragment } from 'react'
+import Link from 'next/link'
+
+const About = () => (
+  <Fragment>
+    <div className="container-fluid bg-success page">
+      <h1>About us</h1>
+      <Link href="/">
+        <a className="btn btn-light">Go back home</a>
+      </Link>
+      <style jsx>{`
+        .page {
+          height: 100vh;
+        }
+      `}</style>
+    </div>
+  </Fragment>
+)
+
+export default About
diff --git a/examples/skip-initial-transition/pages/index.js b/examples/skip-initial-transition/pages/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Index = () => (
+  <div className="container bg-primary page">
+    <h1>Hello, world!</h1>
+    <Link href="/about">
+      <a className="btn btn-light">About us</a>
+    </Link>
+    <style jsx>{`
+      .page {
+        height: 100vh;
+      }
+    `}</style>
+  </div>
+)
+
+export default Index
diff --git a/src/PageTransition.js b/src/PageTransition.js
@@ -61,7 +61,7 @@ class PageTransition extends React.Component {
 
     const { children } = props
     this.state = {
-      state: 'enter',
+      state: (props.skipInitialTransition) ? 'init' : 'enter',
       isIn: !shouldDelayEnter(children),
       currentChildren: children,
       nextChildren: null,
@@ -195,7 +195,7 @@ class PageTransition extends React.Component {
   }
 
   render() {
-    const { timeout, loadingComponent, loadingCallbackName } = this.props
+    const { timeout, loadingComponent, loadingCallbackName, skipInitialTransition } = this.props
     const { renderedChildren: children, state } = this.state
 
     if (['entering', 'exiting', 'exited'].indexOf(state) !== -1) {
@@ -212,7 +212,7 @@ class PageTransition extends React.Component {
         <Transition
           timeout={timeout}
           in={this.state.isIn}
-          appear
+          appear={!skipInitialTransition}
           onEnter={() => this.onEnter()}
           onEntering={() => this.onEntering()}
           onEntered={() => this.onEntered()}
@@ -266,13 +266,15 @@ PageTransition.propTypes = {
   },
   /* eslint-enable react/require-default-props */
   monkeyPatchScrolling: PropTypes.bool,
+  skipInitialTransition: PropTypes.bool,
 }
 
 PageTransition.defaultProps = {
   loadingComponent: null,
   loadingCallbackName: 'pageTransitionReadyToEnter',
   loadingDelay: 500,
   monkeyPatchScrolling: false,
+  skipInitialTransition: false,
 }
 
 export default PageTransition