Я немного растерялся из-за ReactCSSTransitionGroup.Прочитайте документы
В используемых примерах: ReactCSSTransitionGroup и один CSSTransition вlist example {CSSTransition, TransitionGroup}
Таким образом, они все делают одно и то же (анимация), но ReactCSSTransitionGroup выглядит следующим образом
все из примеров документов
render() {
return (
<ReactCSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={500}
transitionEnter={false}
transitionLeave={false}>
<h1>Fading at Initial Mount</h1>
</ReactCSSTransitionGroup>
);
}
одиночный CSSTransition
<CSSTransition
in={showValidationMessage}
timeout={300}
classNames="message"
unmountOnExit
onExited={() => {
this.setState({
showValidationButton: true,});}}
>
*some code*
</CSSTransition>
{CSSTransition, TransitionGroup} - вот так
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition key={id} timeout={500} classNames="fade">
<ListGroupItem>
*Some code*
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
Итак, когда я должен / лучше использовать ReactCSSTransitionGroup, одиночный CSSTransition или {CSSTransition, TransitionGroup}?