route animations
This commit is contained in:
parent
b0188ab965
commit
c22d2a0f94
|
@ -25,7 +25,8 @@
|
||||||
"ms": "^2.1.1",
|
"ms": "^2.1.1",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-blockies": "^1.4.1",
|
"react-blockies": "^1.4.1",
|
||||||
"react-dom": "^16.8.6"
|
"react-dom": "^16.8.6",
|
||||||
|
"react-pose": "^4.0.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.4.4",
|
"@babel/core": "^7.4.4",
|
||||||
|
|
11
src/App.css
11
src/App.css
|
@ -77,7 +77,13 @@ a h1 {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app > div {
|
.app > div,
|
||||||
|
.app > div > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app > div > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -95,7 +101,8 @@ a h1 {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: .1rem solid #e2e2e2;
|
border: .1rem solid #e2e2e2;
|
||||||
animation: fadein .5s .5s ease-out;
|
|
||||||
|
/* animation: fadein .5s .5s ease-out; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .box {
|
.dark .box {
|
||||||
|
|
57
src/App.jsx
57
src/App.jsx
|
@ -1,11 +1,8 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import {
|
import PropTypes from 'prop-types'
|
||||||
Router,
|
import { Router, Location } from '@reach/router'
|
||||||
createMemorySource,
|
|
||||||
createHistory,
|
|
||||||
LocationProvider
|
|
||||||
} from '@reach/router'
|
|
||||||
import { webFrame } from 'electron'
|
import { webFrame } from 'electron'
|
||||||
|
import posed, { PoseGroup } from 'react-pose'
|
||||||
import AppProvider from './store/AppProvider'
|
import AppProvider from './store/AppProvider'
|
||||||
import Titlebar from './components/Titlebar'
|
import Titlebar from './components/Titlebar'
|
||||||
import Home from './screens/Home'
|
import Home from './screens/Home'
|
||||||
|
@ -18,9 +15,41 @@ import './App.css'
|
||||||
webFrame.setVisualZoomLevelLimits(1, 1)
|
webFrame.setVisualZoomLevelLimits(1, 1)
|
||||||
webFrame.setLayoutZoomLevelLimits(0, 0)
|
webFrame.setLayoutZoomLevelLimits(0, 0)
|
||||||
|
|
||||||
// https://github.com/reach/router/issues/25
|
const Animation = posed.div({
|
||||||
const source = createMemorySource('/')
|
enter: {
|
||||||
const history = createHistory(source)
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
delay: 100,
|
||||||
|
transition: {
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 500,
|
||||||
|
damping: 25,
|
||||||
|
restDelta: 0.5,
|
||||||
|
restSpeed: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
exit: {
|
||||||
|
y: 50,
|
||||||
|
opacity: 0,
|
||||||
|
transition: { duration: 150 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const PosedRouter = ({ children }) => (
|
||||||
|
<Location>
|
||||||
|
{({ location }) => (
|
||||||
|
<PoseGroup>
|
||||||
|
<Animation key={location.key}>
|
||||||
|
<Router location={location}>{children}</Router>
|
||||||
|
</Animation>
|
||||||
|
</PoseGroup>
|
||||||
|
)}
|
||||||
|
</Location>
|
||||||
|
)
|
||||||
|
|
||||||
|
PosedRouter.propTypes = {
|
||||||
|
children: PropTypes.any.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
export default class App extends PureComponent {
|
export default class App extends PureComponent {
|
||||||
render() {
|
render() {
|
||||||
|
@ -28,12 +57,10 @@ export default class App extends PureComponent {
|
||||||
<AppProvider>
|
<AppProvider>
|
||||||
<Titlebar />
|
<Titlebar />
|
||||||
<div className="app">
|
<div className="app">
|
||||||
<LocationProvider history={history}>
|
<PosedRouter>
|
||||||
<Router>
|
<Home path="/" default />
|
||||||
<Home path="/" default />
|
<Preferences path="/preferences" />
|
||||||
<Preferences path="preferences" />
|
</PosedRouter>
|
||||||
</Router>
|
|
||||||
</LocationProvider>
|
|
||||||
</div>
|
</div>
|
||||||
</AppProvider>
|
</AppProvider>
|
||||||
)
|
)
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default class Home extends PureComponent {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main className="main box">
|
<main className="main box">
|
||||||
<Link className="preferences-link" to="preferences">
|
<Link className="preferences-link" to="/preferences">
|
||||||
<IconCog />
|
<IconCog />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
.preferences {
|
.preferences {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 7vh;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue