Почему блок резко появляется ReactCSSTransitionGroup?

Question

[uzi_no_uzi]

Имеется вот такой код:

https://codepen.io/anon/pen/GPxzxZ

При случаи case 'product' происходит что-то непонятное. При появлении блок не анимируется, а резко появляется. Не могу понять в чем причина, при всем этом, исчезает блок плавно.

Что еще интересно, это если, например анимация исчезновения прошла не до конца, а появление блока вызвано опять, то анимация появления работает, а когда с нуля, то нет. Что еще более интересно, это то, что такой же блок с такими же настройками отлично работает при появлении и при исчезновении, я говорю о case: 'search'.

В чем может быть проблема? Уже несколько часов ломаю голову, ничего не выходит.

Answer 1

[Виталий Киренков]

Простите, но у вас очень грязный код. Вынесите всю логику в отдельные методы из рендера.

Касательно анимации - https://reactjs.org/docs/animation.html
`transitionName` - это класс анимации, а не страницы. Посмотрите внимательно документацию.

Подключите библиотеку classname. Избежите таких конструкций:

if(this.state.open == true) {
            classList = 'main-wrapper main-wrapper--active';
        } else {
            classList = 'main-wrapper';
        }

Comments

[uzi_no_uzi]

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

[Виталий Киренков]

uzi_no_uzi, потому что класса нет и компонент не понимает какую анимацию ему проигрывать. Уберите димамичное проставление класса анимации. Если не взлетает, сделайте жизнеспособный пример кода и попробуем разобраться.

[uzi_no_uzi]

Виталий Киренков, Я пробовал класс делать не динамичным, тоже самое, динамика никак не мешает, ведь сначала подставляется класс, а только потом уже вызывается появление предмета.