-
Notifications
You must be signed in to change notification settings - Fork 29.9k
/
Animation.tsx
123 lines (109 loc) · 2.53 KB
/
Animation.tsx
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
118
119
120
121
122
123
import * as React from 'react';
import ReactCSSTransitionGroup = require('react-addons-css-transition-group');
import {
BrowserRouter as Router,
RouteComponentProps,
Route,
LinkProps,
Link,
Redirect
} from 'react-router-dom';
/* you'll need this CSS somewhere
.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 250ms ease-in;
}
*/
const AnimationExample = () => (
<Router>
<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>
)}/>
</Router>
);
const NavLink: React.SFC<LinkProps> = (props) => (
<li style={styles.navItem}>
<Link {...props} style={{ color: 'inherit' }}/>
</li>
);
interface HSLParams {
h: string;
s: string;
l: string;
}
const HSL: React.SFC<RouteComponentProps<HSLParams>> = ({ 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: any = {};
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;