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

14628 ワード
React JavaScript babel browserify Velocity JavaScript テキストリンク

react-addons-css-transition-groupを使ってAngularjsのngAnimateのStagging（上記のような遅延フェードイン）を利用したいと思っていました。

結論から言えば[email protected]でtransitionStaggerのようなプロパティが存在しなかったので、velocity-reactを使って解決します。

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

mkdir stagger
cd stagger

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

npm install
npm start
# beefy index.js --open -- -t babelify
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"
  }
}
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>をレンダリングするサーバーが完成しました。

これに、[email protected]の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を実行します。

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