1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-14 21:10:41 +01:00

remove page transitions

This commit is contained in:
Matthias Kretschmann 2018-05-04 13:49:48 +02:00
parent 7cab3eec31
commit c0e333dd43
Signed by: m
GPG Key ID: 606EEEF3C479A91F

View File

@ -1,24 +1,10 @@
import React, { Component } from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import Head from '../components/atoms/Head' import Head from '../components/atoms/Head'
import Header from '../components/organisms/Header' import Header from '../components/organisms/Header'
import Footer from '../components/organisms/Footer' import Footer from '../components/organisms/Footer'
import { FadeIn } from '../components/atoms/Animations'
import './index.scss' import './index.scss'
class TransitionHandler extends Component {
shouldComponentUpdate() {
return this.props.location.pathname === window.location.pathname
}
render() {
const { children } = this.props
return <div className="transition-container">{children}</div>
}
}
const TemplateWrapper = ({ data, location, children }) => { const TemplateWrapper = ({ data, location, children }) => {
const meta = data.dataJson const meta = data.dataJson
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
@ -29,16 +15,7 @@ const TemplateWrapper = ({ data, location, children }) => {
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
<main className="screen"> <main className="screen">
<TransitionGroup appear={true}>
<FadeIn
key={location.pathname}
timeout={{ enter: 300, exit: 200, appear: 300 }}
>
<TransitionHandler location={location}>
{children()} {children()}
</TransitionHandler>
</FadeIn>
</TransitionGroup>
</main> </main>
<Footer meta={meta} /> <Footer meta={meta} />
@ -46,18 +23,13 @@ const TemplateWrapper = ({ data, location, children }) => {
) )
} }
TransitionHandler.propTypes = {
children: PropTypes.any,
location: PropTypes.object.isRequired,
}
TemplateWrapper.propTypes = { TemplateWrapper.propTypes = {
children: PropTypes.func, children: PropTypes.func,
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired, location: PropTypes.object.isRequired,
} }
export default withRouter(TemplateWrapper) export default TemplateWrapper
export const query = graphql` export const query = graphql`
query metaQuery { query metaQuery {