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

Question

[Андрей]

Код тупо скопировал из документации:

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

Answer 1

[Леонид]

Вам не нужно каждый элемент оборачивать в 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, как в документации

Comments

[Андрей]

То есть каждый элемент по отдельности нельзя анимировать? Печально, фантазия наших дизайнеров безгранична и они могут придумать не только каждый элемент анимировать, но и в зависимости от условий анимировать их по разному.
Сделал так:


{items.map(item => )}


Теперь все CartItem оборачиваются элементом span с классом cart2. Стили для классов .example-leave и .example-enter, конечно, подключил.

А вообще что должно происходить? Я так понимаю, что компоненты CartItem должны быть обернуты с некий элемент (span), затем на 5000 миллисекунд этому элементу добавляется один класс, или на 3000 миллисекунд другой. На эти классы можно повесить анимацию. Правильно?

[Андрей]

Что-то тут с редактором...
вот код:
< ReactCSSTransitionGroup
className="cart2"
transitionName="example"
transitionEnterTimeout={5000}
transitionLeaveTimeout={3000}
>
{items.map(item => )}
< /ReactCSSTransitionGroup>

[Леонид]

1. Вполне можно анимировать и один элемент.

2. По-умолчанию да, span. Вы можете изменить это с помощью props component, как это сделал я в примере.

3. Не копал глубоко, но вероятно да, на детей вешаются классы.

4. Вам в какой момент нужна анимация? Если у вас уже ReactCSSTransitionGroup уже примонтирован в DOM и вы в него добавляете новые элементы, которые нужно анимировать - вам действительно нужен enter. Если у вас ReactCSSTransitionGroup монтируется одновременно с дочерними элементами, вам нужен appear вместо enter

[Андрей]

Да ReactCSSTransitionGroup монтируется вместе с анимируемыми элементами. Нажал кнопку - компонент вставляется в DOM, нажал еще раз - удаляется. Но хотелось бы, чтобы элемент не появлялся внезапно, а плавно открывался.

Сделал так:

< ReactCSSTransitionGroup
className="cart2"
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={50000}
transitionEnter={false}
transitionLeave={false}>

Та же история - обертка из span'а с классом cart2. Специально ставлю большие значения таймаута, чтобы разглядеть добавление классов. Ничего :(

Нет ли какой-то альтернативы для анимации реакт-компонентов без шаманства с ReactCSSTransitionGroup

[Леонид]

ReactCSSTransitionGroup - единственный известный мне способ, к тому же от создателей react. Вам стоит разобраться с вашей проблемой, а не искать велосипеды. Сделал на коленке пример https://codepen.io/anon/pen/zZmQLJ. Что в нем непонятно?

[Андрей]

Леонид: Леонид, спасибо за Ваш пример. Он помог мне разобрать в проблеме. Я ожидал что
"...обернут в некий элемент (span), затем на 5000 миллисекунд >>этому<< элементу добавляется один класс.."
А оказалось, что стили добавляются не ему, а его дочерним элементам. А css-стили, благодаря которым я мог бы это замерить, не работали т.к. остались из документации для transitionEnter и transitionLeave, а надо было для transitionAppear другие стили добавить.