Добавление таймаута к функции рендеринга в ReactJS

Question

Добавление таймаута к функции рендеринга в ReactJS

2

Я изучал анимацию с помощью ретрансляции ReactCSSTransitionGroupAppear и transitionEnter.

Они оживляют ввод нот на экране, но первоначальная загрузка списка отображает все элементы одновременно.

Есть ли способ добавить задержку к рендерингу каждого элемента при начальной загрузке, чтобы они не отображались сразу?

Вы можете увидеть полный код здесь

var NotesList = React.createClass({
  render: function(){
    var notes = this.props.notes.map(function(note, index){
      return (<li className="list-group-item" key={index}>
                <b>{note}</b>
              </li>);
    })
    return (
      <ul className="list-group">
        <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
            {notes}
         </ReactCSSTransitionGroup>
      </ul>
    )
  }
});

Nicholas Murray 02 авг. 2016, в 14:50

Источник

0

Проверьте этот похожий вопрос: stackoverflow.com/questions/31702054/… Кроме того, я использовал переходы React-bootstrap, поскольку я нахожу библиотеку более простой в использовании. Но я думаю, вернемся к вашему примеру, что свойство transitionAppear не должно использоваться для всех дочерних элементов и запускать каждую анимацию на основе завершения предыдущих.
Héctor 02 авг. 2016, в 13:02

Теги:

reactjs

css3

1 ответ

Ещё вопросы

Проверьте этот похожий вопрос: stackoverflow.com/questions/31702054/… Кроме того, я использовал переходы React-bootstrap, поскольку я нахожу библиотеку более простой в использовании. Но я думаю, вернемся к вашему примеру, что свойство transitionAppear не должно использоваться для всех дочерних элементов и запускать каждую анимацию на основе завершения предыдущих.

Ori Drori · Accepted Answer · 2016-08-02T17-05-00.000Z

Поскольку вы перебираете элементы для их рендеринга, вы можете использовать index для назначения растущей transition-delay каждому элементу (демо):

var NotesList = React.createClass({
  firstTime: true, // is this the 1st render
  render: function(){
    var delay = this.firstTime ? 500 : 0 // delay 500 for first time, 0 for all others
    var notes = this.props.notes.map(function(note, index){
      // add the transition-delay using the index to increment it
      return (<li className="list-group-item" key={index} style={{ transitionDelay: '${index * delay}ms' }}>
                <b>{note}</b>
              </li>);
    })

    this.firstTime = false // turn of first time

    return (
      <ul className="list-group">
        <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
            {notes}
         </ReactCSSTransitionGroup>
      </ul>
    )
  }
});