1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-next-page-transitions/pages/_app.js

68 lines
1.7 KiB
JavaScript
Raw Normal View History

import React from 'react'
import App, { Container } from 'next/app'
import { PageTransition } from 'next-page-transitions'
import Loader from '../components/Loader'
const TIMEOUT = 400
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
timeout={TIMEOUT}
classNames='page-transition'
loadingComponent={<Loader />}
loadingDelay={500}
loadingTimeout={{
enter: TIMEOUT,
exit: 0
}}
loadingClassNames='loading-indicator'
>
<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 ${TIMEOUT}ms, transform ${TIMEOUT}ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity ${TIMEOUT}ms;
}
.loading-indicator-appear,
.loading-indicator-enter {
opacity: 0;
}
.loading-indicator-appear-active,
.loading-indicator-enter-active {
opacity: 1;
transition: opacity ${TIMEOUT}ms;
}
`}</style>
</Container>
)
}
}