m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00
Code Releases Activity

kick out react-transition-group

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-09-14 20:58:49 +02:00
parent 54e8020fbe
commit 7080b3c886
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 48 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -44,7 +44,6 @@
"react-helmet": "^5.2.0", "react-helmet": "^5.2.0",
"react-markdown": "^3.6.0", "react-markdown": "^3.6.0",
"react-pose": "^3.3.0", "react-pose": "^3.3.0",
"react-transition-group": "^2.4.0",
"vcf": "^2.0.1" "vcf": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {

23
src/components/Layout.jsx
View File

@ -1,12 +1,13 @@
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from './atoms/Transitions'
import Head from './molecules/Head' import Head from './molecules/Head'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer' import Footer from './organisms/Footer'
import styles from './Layout.module.scss' import styles from './Layout.module.scss'
const timeout = 150 const timeout = 250
export default class Layout extends PureComponent { export default class Layout extends PureComponent {
static propTypes = { static propTypes = {
@ -18,24 +19,18 @@ export default class Layout extends PureComponent {
const { children, location } = this.props const { children, location } = this.props
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
const RoutesContainer = posed.div({ const RoutesContainer = posed.div(fadeIn)
enter: {
opacity: 1,
delay: timeout,
delayChildren: timeout
},
exit: {
opacity: 0
},
initialPose: 'exit'
})
return ( return (
<Fragment> <Fragment>
<Head /> <Head />
<Header isHomepage={isHomepage} />
<PoseGroup animateOnMount={true}> <PoseGroup animateOnMount={true}>
<RoutesContainer key={location.pathname}> <RoutesContainer
key={location.pathname}
delay={timeout}
delayChildren={timeout}
>
<Header isHomepage={isHomepage} />
<main className={styles.screen}>{children}</main> <main className={styles.screen}>{children}</main>
</RoutesContainer> </RoutesContainer>
</PoseGroup> </PoseGroup>

21
src/components/atoms/Animations.jsx
View File

@ -1,21 +0,0 @@
import React from 'react'
import CSSTransition from 'react-transition-group/CSSTransition'
import './Animations.scss'
const Animation = props => <CSSTransition appear={true} in={true} {...props} />
export const FadeIn = props => (
<Animation
classNames="fadein"
timeout={{ enter: 200, exit: 200, appear: 200 }}
{...props}
/>
)
export const MoveIn = props => (
<Animation
classNames="movein"
timeout={{ enter: 300, exit: 200, appear: 300 }}
{...props}
/>
)

43
src/components/atoms/Animations.scss
View File

@ -1,43 +0,0 @@
.fadein-appear,
.fadein-enter {
opacity: .01;
&.fadein-appear-active,
&.fadein-enter-active {
opacity: 1;
transition: 200ms ease-in;
}
}
.fadein-exit {
opacity: 1;
transition: 200ms ease-in;
&.fadein-exit-active {
opacity: .01;
}
}
.movein-appear,
.movein-enter {
opacity: .01;
transform: translate3d(0, 3rem, 0);
&.movein-appear-active,
&.movein-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 300ms ease-out;
}
}
.movein-exit {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 100ms ease-out;
&.movein-exit-active {
opacity: .01;
transform: translate3d(0, 3rem, 0);
}
}

14
src/components/atoms/LogoUnit.jsx
View File

@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { moveInBottom } from '../atoms/Transitions'
import Logo from '../svg/Logo' import Logo from '../svg/Logo'
import styles from './LogoUnit.module.scss' import styles from './LogoUnit.module.scss'
@ -15,18 +16,7 @@ const query = graphql`
} }
` `
const Animation = posed.div({ const Animation = posed.div(moveInBottom)
enter: {
opacity: 1,
y: 0,
transition: { type: 'spring' }
},
exit: {
opacity: 0,
y: '2rem',
transition: { type: 'spring' }
}
})
class LogoUnit extends PureComponent { class LogoUnit extends PureComponent {
state = { minimal: false } state = { minimal: false }

30
src/components/atoms/Transitions.js Normal file
View File

@ -0,0 +1,30 @@
export const fadeIn = {
enter: {
opacity: 1
},
exit: {
opacity: 0
}
}
export const moveInTop = {
enter: {
y: 0,
transition: { type: 'spring' }
},
exit: {
y: '-2rem',
transition: { type: 'spring' }
}
}
export const moveInBottom = {
enter: {
y: 0,
transition: { type: 'spring' }
},
exit: {
y: '2rem',
transition: { type: 'spring' }
}
}

15
src/components/molecules/Availability.jsx
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from '../atoms/Transitions'
import styles from './Availability.module.scss' import styles from './Availability.module.scss'
const query = graphql` const query = graphql`
@ -17,18 +17,7 @@ const query = graphql`
} }
` `
const Animation = posed.aside({ const Animation = posed.aside(fadeIn)
enter: {
opacity: 1,
y: 0,
transition: { type: 'spring' }
},
exit: {
opacity: 0,
y: '2rem',
transition: { type: 'spring' }
}
})
export default class Availability extends PureComponent { export default class Availability extends PureComponent {
static propTypes = { hide: PropTypes.bool } static propTypes = { hide: PropTypes.bool }

14
src/components/molecules/Networks.jsx
View File

@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { moveInTop } from '../atoms/Transitions'
import Email from '../svg/Email' import Email from '../svg/Email'
import Blog from '../svg/Blog' import Blog from '../svg/Blog'
@ -43,18 +44,7 @@ const NetworkIcon = props => {
} }
} }
const Animation = posed.aside({ const Animation = posed.aside(moveInTop)
enter: {
opacity: 1,
y: 0,
transition: { type: 'spring' }
},
exit: {
opacity: 0,
y: '-2rem',
transition: { type: 'spring' }
}
})
export default class Network extends PureComponent { export default class Network extends PureComponent {
static propTypes = { static propTypes = {

15
src/components/molecules/ThemeSwitch.jsx
View File

@ -2,22 +2,13 @@ import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from '../atoms/Transitions'
import Day from '../svg/Day' import Day from '../svg/Day'
import Night from '../svg/Night' import Night from '../svg/Night'
import styles from './ThemeSwitch.module.scss' import styles from './ThemeSwitch.module.scss'
const Animation = posed.aside({ const Animation = posed.aside(fadeIn)
enter: {
opacity: 1,
y: 0,
transition: { type: 'spring' }
},
exit: {
opacity: 0,
y: '-2rem',
transition: { type: 'spring' }
}
})
const ThemeToggle = ({ dark }) => ( const ThemeToggle = ({ dark }) => (
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive"> <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">