Почему не работает ReactCSSTransitionGroup?

Код тупо скопировал из документации:
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const Cart = (props) => {
...

    return (
            <section className="cart">
                {items.map(item =>
                    <ReactCSSTransitionGroup
                        transitionName="example"
                        transitionEnterTimeout={5000}
                        transitionLeaveTimeout={3000}>
                    <CartItem key={item.id} item={item} />
                    </ReactCSSTransitionGroup>
                )}
            </section>

    );
};

И итоге вокруг CartItem появляется простой элемент span, без классов. Все. Потом пропадает когда удаляю CartItem
  • Вопрос задан
  • 1003 просмотра
Решения вопроса 1
@zzzevaka
Вам не нужно каждый элемент оборачивать в ReactCSSTransitionGroup.

Попробуйте так:

return (
  <ReactCSSTransitionGroup
    component="section"
    className="cart"
    transitionName="example"
    transitionEnterTimeout={5000}
    transitionLeaveTimeout={3000}
  >
    {items.map(item => <CartItem key={item.id} item={item} />)}
  </ReactCSSTransitionGroup>
);


ну и, конечно, у вас должен быть описан css example-enter и example-leave, как в документации
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы