react-motion の使い方ですが、まず、変化させたいコンポーネントを Motion
で囲みます。
Motion
には defaultStyle
と style
の二つのプロパティが設定できます。
defaultStyle
で設定した値が style
で設定した値に徐々に変化していき interpolatingStyle
に代入されます。
以下のコードは circle
の半径が 10 から 65 に変化します。
js
1class extends Component {
2 render() {
3 return <Motion
4 defaultStyle={{
5 r: 10,
6 }}
7 style={{
8 r: spring(65),
9 }}
10 >
11 {interpolatingStyle =>
12 <svg
13 onClick={event =>
14 this.setState({
15 clicked: false,
16 })
17 }
18 viewBox="0 0 300 150"
19 >
20 <circle r={interpolatingStyle.r} />
21 </svg>
22 }
23 </Motion>
24 }
25}
https://codepen.io/anon/pen/yqrLLa
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。