Реакция - выход компонента TransitionGroup медленный и дрянный - PullRequest
Новая
       41

Реакция - выход компонента TransitionGroup медленный и дрянный

0 голосов
/ 04 декабря 2018

Я использую React TransitionGroup, чтобы анимировать (постепенно увеличивать / уменьшать) большой список элементов карты, которые могут быть отфильтрованы (т.е. удалены или добавлены пользователем).

Входящая анимация работает очень хорошо, но при удалении элементов и применении затухания анимация очень тяжелая.В моих инструментах разработки я вижу, как группе узлов требуется некоторое время для удаления из DOM - намного больше, чем параметр времени ожидания 300 мс.На самом деле, даже радикальное сокращение времени ожидания и CSS-анимации до 1 мс по-прежнему вызывает эту проблему.

Эти проблемы с выходом не возникают, если я полностью удаляю TransitionGroup или я устанавливаю пропу 'exit' в значение false.

Вот важный фрагмент кода: 

    <div className="column col-9 col-md-12 col-reviews bg-gray">
      <TransitionGroup> 
        {filteredReviews.map((review) => (
          <CSSTransition
            key={review.reviewDate}
            timeout={300}
            classNames="fade"
          > 
            <ReviewBox review={review} />
          </CSSTransition> 
          ))}
      </TransitionGroup>          
    </div>

CSS точно такой же, как показано на их странице примера , не повторяя его здесь, так как я уверен, что этоне имеет ничего общего.

Есть намеки?

...