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;

组件通过Action获取数据并更新商店，然后根据状态呈现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 （在处理完所有字符之前，请务必在卸载组件时销毁超时功能）

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

1 个答案: