React-transition-group: State 'entering' is not showing

[Alfrex92]

What is the current behavior?

I would like to make a transition when the component AppDetailsSingle is mounted. But, I can't.
When I console log the state 'entering' is not showing. I think that is the reason why the transition is not working.
https://codesandbox.io/s/nk652r7r60

What is the expected behavior?
A transition of from 0 to 1 opacity, duration 600 when AppDetailsSingle is mounted and unmounted.

Thank you. I have been trying to fix this for two days.

[jquense]

There was a bunch not right there, you were mounting the whole Transition at the same time as trying to show it, but didn't have appear set. You really want to let the Transtion control when the component is mounted or unmounted, I switched to always rendering the Transition and telling it to mount and unmount on exit/enter. Second, you need to handle browser reflows properly for css transitions from javascript (there are plenty of issues about it). Hope that helps!

https://codesandbox.io/s/kkq0zyr03o

[Alfrex92]

Wooww thank you very much!!! I struggled a lot. I really appreciate the help.

I noticed that you add/ change 3 things:
1) added
unmountOnExit mountOnEnter onEnter={reflowBrowser}
2) change & added
const transitionStyles = { exited: { opacity: 0 }, entering: { opacity: 1 }, entered: { opacity: 1 }, exiting: { opacity: 0 } }
3) added
const reflowBrowser = node => { node.clientHeight }

"You were mounting the whole Transition at the same time as trying to show it"
The reason was that I wasn't passing unmounOnExit, mountOnEnter
onEnter={reflowBrowser} ?
In that case, every time that I used the component Transition I should always pass those 3 props ?
Sorry to bother you again. I didn't understand 100%.

[jquense]

Whether you need unmountOnExit and mountOnEnter is up to your situation, try removing them and inspecting the DOM to see how they affect the markup.

For reflowBrowser, thats also very specific to the animation: read for a bit of context of why it's there: http://semisignal.com/?p=5298

[Alfrex92]

Thank you very much for the article!