Можно ли исключить определенные элементы из ReactCSSTransitionGroup? - PullRequest
Новая
       11

Можно ли исключить определенные элементы из ReactCSSTransitionGroup?

0 голосов
/ 27 октября 2019

Мне кажется, что это довольно простой случай, когда я хочу отобразить список элементов, но иногда и несколько загрузочных блесен. (Скажем, если кто-то пытался сохранить несколько элементов одновременно.)

Я понял, что могу использовать официальные Реагирующие анимационные дополнения , чтобы добавить некоторые интересные эффекты затухания, когда элементыизначально загружен или был удален.

Я пошел дальше и подстроил что-то вроде следующего: 

<ReactCSSTransitionGroup
  transitionName="fade"
  transitionAppear={true}
  transitionAppearTimeout={500}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>

  {props.todos.map(todo => (
    <Todo key={todo.id} todo={todo} />
  ))}

  {props.loadingSpinners.map(ls => (
    // Somehow exclude fade effects for these?
    <LoadingSpinner key={'loading-spinner-' + ls.id} />
  ))}

</ReactCSSTransitionGroup>

Сначала я подумал, что это круто, что загружаемые элементы блесны исчезают, однако ябыстро обнаружил, что это вызвало несколько проблем с макетом. (А именно, как только загрузка завершена, существует короткий период, когда спиннер загрузки исчезает, а недавно сохраненное ToDo постепенно исчезает. Кроме того, становится неожиданным, когда процесс загрузки заканчивается быстрее, чем анимация требуется для завершения.)

В любом случае, кажется, что простым решением было бы просто «исключить» определенных потомков из правил компонента ReactCSSTransitionGroup. Кто-нибудь знает, возможно ли это?

...