-
Notifications
You must be signed in to change notification settings - Fork 3
/
CardFlip.js
47 lines (44 loc) · 1.74 KB
/
CardFlip.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
import React from 'react';
import { Spring, Transition, animated } from 'react-spring/renderprops';
import styled from 'styled-components';
const hide = { opacity: 0 };
const show = { opacity: 1 };
const StyledSpring = styled.div`
.card-flip {
height: ${props => props.height};
& > div {
position: absolute;
width: 100%;
height: 100%;
}
}
`
export default class CardFlip extends React.Component {
state = { flipped: false }
click = () => this.setState(state => ({ flipped: !state.flipped }))
render() {
const { flipped } = this.state;
const { front, back, height } = this.props;
return (
<StyledSpring height={height}>
<Spring native to={{ transform: `perspective(600px) rotateY(${flipped ? 180 : 0}deg)` }}>
{props => (
<animated.div className="card-flip" onClick={this.click} style={props}>
<Transition native unique items={flipped} from={hide} enter={show} leave={hide}>
{flipped => ({ opacity }) => (
<animated.div
style={{
transform: `rotateY(${flipped ? 180 : 0}deg)`,
opacity: opacity.interpolate({ range: [0, 0.5, 1], output: [0, 0, 1] })
}}>
{flipped ? back : front}
</animated.div>
)}
</Transition>
</animated.div>
)}
</Spring>
</StyledSpring>
)
}
}