React.jsレンダリング時の各要素のフェードイン+遅延

Question

私は私の反応プロジェクトを管理するためにFLUXを使用しています。 Bellowは、文字のリストを返すコンポーネントのコードです。

import React from 'react'; 
import {Link} from 'react-router'; 
import {isEqual} from 'underscore'; 
import CharacterListStore from '../stores/CharacterListStore'; 
import CharacterListActions from '../actions/CharacterListActions'; 

class CharacterList extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = CharacterListStore.getState(); 
    this.onChange = this.onChange.bind(this); 
    } 


    componentDidMount() { 
    CharacterListStore.listen(this.onChange); 
    CharacterListActions.getCharacters(this.props.params); 
    } 


    componentWillUnmount() { 
    CharacterListStore.unlisten(this.onChange); 
    } 

    componentDidUpdate(prevProps) { 
    if (!isEqual(prevProps.params, this.props.params)) { 
     CharacterListActions.getCharacters(this.props.params); 
    } 
    } 

    onChange(state) { 
    this.setState(state); 
    } 


    render() { 
    let charactersList = this.state.characters.map((character, index) => { 
     return (
     <div key={character.characterId} className='list-group-item animated fadeIn'> 
      <div className='media'> 
      <span className='position pull-left'>{index + 1}</span> 
      <div className='pull-left thumb-lg'> 
       <Link to={'/characters/' + character.characterId}> 
       <img className='media-object' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'} /> 
       </Link> 
      </div> 
      <div className='media-body'> 
       <h4 className='media-heading'> 
       <Link to={'/characters/' + character.characterId}>{character.name}</Link> 
       </h4> 
       <small>Race: <strong>{character.race}</strong></small> 
       <br /> 
       <small>Bloodline: <strong>{character.bloodline}</strong></small> 
       <br /> 
       <small>Wins: <strong>{character.wins}</strong> Losses: <strong>{character.losses}</strong></small> 
      </div> 
      </div> 
     </div> 
    ); 
    }); 

    return (
     <div className='container'> 
     <div className='list-group'> 
      {charactersList} 
     </div> 
     </div> 
    ); 
    } 
} 

export default CharacterList; 

コンポーネントは、アクションを通じてデータを取得し、ストアを更新してから、その状態に基づいてhtml要素をレンダリングします。

---

私の質問は：私は、レンダリングの各項目については500msの遅延で個別に各アイテムにフェード可能性が何かを実装することが可能でしょうか？

私はではありません。反応してJQueryを使用すると、は反応すると思っていると思います。助けや助言をいただければ幸いです。 https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup

あなたはアニメーションのためReactCSSTransitionGroupかReactTransitionGroupを使用することができます - のアニメーションドキュメントを反応させるのを見てみましょう事前

Answer 1

でお願いします。

アイテムを順番にフェードインしたい場合は、css transition-delayプロパティを使用できます。

this.state.characters.length === state.characters.length は（アンマウントした場合にタイムアウト機能を破壊するようにしてくださいまで、別の方法としては、状態に次の文字を連結し、再帰的にコンポーネントの状態を設定しますタイムアウト機能を呼び出すことにより、シーケンスを制御できすべての文字が処理される前のコンポーネント）