/
index.js
117 lines (104 loc) · 2.66 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React from "react"
import { Link } from "gatsby"
import ReactCSSTransitionGroup from "react-addons-css-transition-group"
import { Route, Redirect } from "react-router-dom"
import "./main.css"
import Layout from "../layouts"
class AnimationExample extends React.Component {
render() {
return (
<Layout>
<div style={{ position: `relative`, minHeight: `80vh` }}>
<Route
render={({ location }) => (
<div style={styles.fill}>
<Route
exact
path="/"
render={() => <Redirect to="/10/90/50" />}
/>
<ul style={styles.nav}>
<NavLink to="/10/90/50">Red</NavLink>
<NavLink to="/120/100/40">Green</NavLink>
<NavLink to="/200/100/40">Blue</NavLink>
<NavLink to="/310/100/50">Pink</NavLink>
</ul>
<div style={styles.content}>
<ReactCSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{/* no different than other usage of
ReactCSSTransitionGroup, just make
sure to pass `location` to `Route`
so it can match the old location
as it animates out
*/}
<Route
location={location}
key={location.key}
path="/:h/:s/:l"
component={HSL}
/>
</ReactCSSTransitionGroup>
</div>
</div>
)}
/>
</div>
</Layout>
)
}
}
const NavLink = props => (
<li style={styles.navItem}>
<Link {...props} style={{ color: `inherit` }} />
</li>
)
const HSL = ({ match: { params } }) => (
<div
style={{
...styles.fill,
...styles.hsl,
background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`,
}}
>
hsl({params.h}, {params.s}%, {params.l}%)
</div>
)
const styles = {}
styles.fill = {
position: `absolute`,
left: 0,
right: 0,
top: 0,
bottom: 0,
}
styles.content = {
...styles.fill,
top: `40px`,
textAlign: `center`,
}
styles.nav = {
padding: 0,
margin: 0,
position: `absolute`,
top: 0,
height: `40px`,
width: `100%`,
display: `flex`,
}
styles.navItem = {
textAlign: `center`,
flex: 1,
listStyleType: `none`,
padding: `10px`,
}
styles.hsl = {
...styles.fill,
color: `white`,
paddingTop: `20px`,
fontSize: `30px`,
}
export default AnimationExample