React.js fadeIn +延迟渲染上的每个元素

Question

所以我使用 FLUX 来管理我的 react 项目。下面是返回字符列表的组件的代码。

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;

组件通过Action获取数据并更新store，然后根据状态渲染html元素。

---

我的问题是：我是否有可能实现可以在每个项目中单独淡入淡出的东西，并为渲染上的每个项目延迟 500 毫秒？

有人告诉我不要在反应中使用 JQuery，所以我想我很难在反应中思考，感谢任何帮助或建议。提前谢谢你

Answer 1

看看 React 的动画文档 - https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup

您可以使用ReactCSSTransitionGroup 或ReactTransitionGroup 制作动画。

如果你想逐个淡入淡出项目，你可以使用 css transition-delay 属性。

或者，您可以通过递归调用超时函数来控制顺序，该函数将设置组件的状态，将下一个字符连接到状态直到this.state.characters.length === state.characters.length （在所有字符处理完之前卸载组件的情况下一定要销毁超时功能）