Я пытаюсь использовать react-transition-group, чтобы добавить анимацию в список, который у меня есть.
Это мои общие настройки, у меня есть компонент списка, который отображает несколько дочерних элементов. Существует ряд взаимодействий, которые приводят к добавлению / удалению элементов из этого списка. Некоторые из этих действий должны привести к удалению компонента с использованием анимации, но я не могу заставить его работать, и я предполагаю, что, возможно, я что-то здесь упускаю.
Это мои основные настройки:
<TransitionGroup className="list" component="ul">
{this.props.item.map(item => (
<CSSTransition key={item.id} timeout={500} classNames="fade" enter={false} exit={!!item.shouldAnimate}>
<ChildComponent/>
</CSSTransition>
))}
</TransitionGroup>
Я проверил, что в моей логике состояния все в порядке (т. Е. shouldAnimate установлен на true, как я ожидаю, но он все еще не анимируется.
Есть предложения?
Edit:
Создал скрипку, показывающую проблему, и я думаю, что теперь я вижу проблему.
http://jsfiddle.net/af0ee2eo/2/
Как я описал выше, я не знаю, пока пользователь не предпримет действие, должно ли это действие быть тем, которое заставляет элемент анимироваться или нет, когда он удаляется из списка. Я правильно устанавливаю shouldAnimate, но перед следующим рендером я удаляю этот элемент из списка. Если я откладываю удаление до следующего рендеринга, все работает нормально, но это раздражает, когда приходится делать каждый раз (это то, что я демонстрирую с помощью флажка «Использовать задержку?» Внизу скрипки). Хотелось бы, чтобы был способ ввести состояние в состояние элемента, содержащегося в состоянии компонента TransitionGroup.
Если у кого-то есть другие идеи, как я могу исправить это без setTimeout или requestAnimationFrame рендера, дайте мне знать, в противном случае я просто отмечу этот вопрос как ответивший.