Why does the ReactCSSTransitionGroup block abruptly appear?

Question

css

Here is the code:
https://codepen.io/anon/pen/GPxzxZ
When case 'product' something strange happens. When the block appears, it does not animate, but abruptly appears. I can not understand what is the reason, with all this, the block disappears smoothly.
What is more interesting is if, for example, the disappearance animation did not go to the end, and the appearance of the block is called again, then the appearance animation works, but when from scratch, it doesn’t. What's even more interesting is that the same block with the same settings works fine on appearing and disappearing, I'm talking about case: 'search'.
What could be the problem? I've been scratching my head for several hours, nothing comes out.

Answer 1

I'm sorry, but your code is very dirty. Move all the logic into separate methods from the renderer.
Regarding animation - https://reactjs.org/docs/animation.html
`transitionName` is an animation class, not a page. Look closely at the documentation.
Include the classname library. Avoid these constructs:

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