1

Transition animation works on entering based on height, but on exiting animaiton doesn't work. Initial height is '0px' and on entering changed height to wrapper height then on entered state height is set to 'auto'. Transition animation works here.

Before exit, again height is set to wrapper height, then on exiting height changed to '0px'.Transition animation doesn't work here.

But it works, when breakpoint set on onExit method.

https://codesandbox.io/s/hopeful-grass-gp6v9?file=/src/App.js

Amaresh S M
  • 2,936
  • 2
  • 13
  • 25
Vivek
  • 455
  • 6
  • 14

1 Answers1

0

Just change the exiting transition style height to auto, the transition is now working as expected. 

const transitionStyle = {
    entered: { height: "auto", overflow: "visible" },
    exiting: { height: "auto" }  /*change this */
  };
Amaresh S M
  • 2,936
  • 2
  • 13
  • 25
  • Yeah, it works. But now the animation works only on exited state, hence there is a delay in toggle click. – Vivek Apr 13 '20 at 07:30
  • If we are setting height dynamically when trying to show a content, we should also let the transition do the calculation for us from the 'defaultStyle' object we already assign height to be 0 – Amit Apr 13 '20 at 07:30