VelocityTransitionGroupを使用して遅延フェードインさせる

![foo.gif](https://qiita-image-store.s3.amazonaws.com/0/28576/826c94f7-cc18-c7af-6335-1318719e9bec.gif)

[react-addons-css-transition-group](https://facebook.github.io/react/docs/animation.html)を使ってAngularjsの[ngAnimateのStagging](https://github.com/59naga/nico.berabou.me/blob/5726fa45f079c044409739e37e2c0b24653a79f0/top/index.styl#L34-L52)（上記のような遅延フェードイン）を利用したいと思っていました。

結論から言えば`react-addons-css-transition-group@0.14.1`で`transitionStagger`のようなプロパティが存在しなかったので、[velocity-react](https://github.com/twitter-fabric/velocity-react)を使って解決します。

まず、コンパイル結果を確認できる即席の環境を用意します。

```bash
mkdir stagger
cd stagger

tree . -L 1
# .
# ├── package.json
# └── index.js

npm install
npm start
# beefy index.js --open -- -t babelify
```

```json:package.json
{
  "name": "stagger",
  "dependencies": {
    "react": "^0.14.1",
    "react-dom": "^0.14.1",
    "velocity-react": "^1.1.1"
  },

  "scripts": {
    "start": "beefy index.js --open -- -t babelify"
  },
  "devDependencies": {
    "babelify": "^5.0.5",
    "beefy": "^2.1.5",
    "browserify": "^12.0.1"
  }
}
```

```js:index.jsx
// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'

// Define <Greet />
class Greet extends React.Component{
  render(){
    return (
      <div>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <h1>Lorem ipsum dolor sit amet.</h1>
      </div>
    )
  }
}

// Render
document.body.innerHTML= '<main></main>'
window.addEventListener('DOMContentLoaded',()=>{
  ReactDOM.render(<Greet />,document.querySelector('main'))
})
```

単純に`<h1>`をレンダリングするサーバーが完成しました。

![スクリーンショット 2015-11-01 07.50.10.png](https://qiita-image-store.s3.amazonaws.com/0/28576/16cb5c95-bea9-9d77-568c-013be80df87d.png)

これに、`velocity-react@1.1.1`の`VelocityTransitionGroup`を利用して、遅延アニメーションを加えます。

```index.js
// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'

import {VelocityTransitionGroup} from 'velocity-react'

// Define <Greet />
class Greet extends React.Component{
  constructor(){
    super()

    this.state= {
      children: [
        (<h1>Lorem ipsum dolor sit amet.</h1>),
        (<h1>Lorem ipsum dolor sit amet.</h1>),
        (<h1>Lorem ipsum dolor sit amet.</h1>),
        (<h1>Lorem ipsum dolor sit amet.</h1>),
        (<h1>Lorem ipsum dolor sit amet.</h1>),
      ]
    }
  }
  render(){
    return (
      <VelocityTransitionGroup
        runOnMount={true}
        enter={
          {
            animation: 'fadeIn',
            stagger: 100,
          }
        }
        leave={
          {
            animation: 'fadeOut',
            stagger: 100,
          }
        }
      >
        {this.state.children}
      </VelocityTransitionGroup>
    )
  }
}

// Render
window.addEventListener('DOMContentLoaded',()=>{
  document.body.innerHTML= '<main></main>'
  ReactDOM.render(<Greet />,document.querySelector('main'))
})
```

`runOnMount`が、`react-addons-css-transition-group`の`transitionAppear`に相当する属性です。初回レンダリング時にも`enter`を実行します。
![スクリーンショット 2015-11-01 07.54.32.png](https://qiita-image-store.s3.amazonaws.com/0/28576/5635df31-a99d-0588-296d-388298e74f15.png)

これで、冒頭で紹介したgifアニメーションのように、stagger-animationが実装できました。