react-routerでCSSアニメーション以上の動きをつける

これは[React Advent Calendar 2016](http://qiita.com/advent-calendar/2016/react)の18日目の記事です。

# やったこと
react-routerのチュートリアルでは`ReactCSSTransitionGroup`によるアニメーションの例しかないので、`ReactTransitionGroup`によるアニメーションの例を作ってみました。
ReactTransitionGroupにより、ページ遷移などの動作をフックに任意のコードを実行することができそうです。

[Animation Add\-Ons \- React]
(https://facebook.github.io/react/docs/animation.html)
[react\-router/examples/animations at master · ReactTraining/react\-router](https://github.com/ReactTraining/react-router/tree/master/examples/animations)

# できたもの
[naoishii/reactTransitionGroup\-example](https://github.com/naoishii/reactTransitionGroup-example)
![gif.gif](https://qiita-image-store.s3.amazonaws.com/0/29854/12eddae3-fe28-959d-3f47-0f76dd57defd.gif)

ページを遷移するたびに画面全体にボールが落ちてきて、一定数以上貯まると下に落ちていきます。
ボールの動きには[matter.js](http://brm.io/matter-js/docs/index.html) を利用しています。

# 作り方と解説
リポジトリは[こちら](https://github.com/naoishii/reactTransitionGroup-example)。

アニメーション以外の部分を[react-routerの公式チュートリアル](https://github.com/ReactTraining/react-router/tree/master/examples/animations)からほとんどそのまま使っています。

## ルーティングさせる
CSSのアニメーションでは以下のようになっている部分を

```js:cssAnimation
    <ReactCSSTransitionGroup
      component="div"
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={500}
    >
      {React.cloneElement(children, {
        key: location.pathname
      })}
    </ReactCSSTransitionGroup>
```

このように書き換えます

```js:customAnimation
    <ReactTransitionGroup>
      {React.cloneElement(children, {
        key: location.pathname,
      })}
    </ReactTransitionGroup>
```
さらに、アニメーションをつけたいコンポーネントをanimate()関数に渡し、返り値となるコンポーネントをRouteに渡します。

```js
const AnimatedIndex = animate(Index);
const AnimatedPage1 = animate(Page1);
const AnimatedPage2 = animate(Page2);

reactDom.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={AnimatedIndex} />
      <Route path="page1" component={AnimatedPage1} />
      <Route path="page2" component={AnimatedPage2} />
    </Route>
  </Router>
), document.querySelector('[data-react="app"]'));
```

ReactTransitionGroupの子コンポーネントは特別なライフサイクルフックを持つことができます。
アニメーションの制御はanimate()関数でもっているので、`Index`, `Page1`などはアニメーションと関係のない普通のコンポーネントです。
ライフサイクルメソッドをもたせる必要があるので、Stateless Functional Componentは使えないことに注意します。

## アニメーションをコントロールする
animate()関数でコンポーネントにアニメーションをつけます。
animate()関数は既存のコンポーネントにアニメーション用のライフサイクルメソッドを与えて返す高階コンポーネントです。

```js:animate.js
import React from 'react';
import BallPool from './ballPool';

const body = document.querySelector('body');
const h = document.createElement('div');
h.id = 'hoge';
h.style.display = 'none';
h.style.position = 'fixed';
h.style.top = '0';
body.appendChild(h);

const ballPool = new BallPool(h);

export default function animate(Component) {
  return class Animated extends React.Component {
    componentWillAppear(done) {
      ballPool.initWorld();
      done();
    }

    componentWillEnter(done) {
      ballPool.update();
      h.style.display = 'block';
      setTimeout(done, 1000);
    }

    componentDidEnter() {
      h.style.display = 'none';
    }

    render() {
      return <Component {...this.props} />;
    }
  };
}
```
今回の例では`matter.js`を使ったので、matter.jsがコントロールするHTML要素を作ったりmatter.jsによる処理をまとめたクラスを作ったりということを`animate.js`で行っています。
ボールを作るなどの処理はクラスにまとめて別ファイルに書き出しました。

`componentWillAppear`, `componentWillAppear`, `componentDidEnter`はReactTransitionGroupを親に持つことでフックできるライフサイクルメソッドです。
ここにライフサイクルに対応するメソッドを叩いたりオーバーレイで表示させる要素の表示/非表示のコントロールをしています。

## アニメーションの処理
実際のアニメーションは`BallPool`クラスに切り出してあります。
ここではreact-routerとは一切関係ない処理のみが書かれています。

* 見えない壁や床を作る処理
* ボールを作る処理
* 床を消す処理
* 不要になったオブジェクトを消す処理

など書きましたが、本題とあまり関係ないので特に解説はしないつもりです。
matter.jsを利用したのも以前別のことに使ったことがあったのと、簡単に見た目が派手なことができるから以上の理由はありません。

# まとめ
* CSSアニメーション以上の複雑な処理をしたい場合はReactTransitionGroupを使う。
* ReactTransitionGroupにより得られるライフサイクルメソッドで処理をコントロールする。
* アニメーション用のライフサイクルメソッドを与える高階コンポーネントを作ると便利。

間違っているところ、わかりにくいところ、改善できるところなどありましたらコメントいただけると助かります。