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:
parent
7cab3eec31
commit
c0e333dd43
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user