0

Just want to do a quick modal popout animation with react-transition-group

current behavior: https://codesandbox.io/s/525zj4vwrk

expected result: https://codesandbox.io/s/7m9721y03x

Similar code, but somehow the first one doesn't work?

Fate Riddle
  • 364
  • 1
  • 3
  • 15

1 Answers1

0

Just missing an unmountOnExit property.

<CSSTransition in={show} timeout={300} classNames="alert" unmountOnExit>

Working example (if you don't like the button popping underneath the "modal" on fade out, then like the other example, use two sets of state with onEnter and onExited properties) :

Edit Transition Example

Matt Carlotta
  • 18,972
  • 4
  • 39
  • 51
  • Thank you. 1. Why does it need `unmountOnExit `? I imaging the card's opacity should be 0 when exited. 2. And also if I apply opacity: 0 style to the card, it's acting weird with blinking. Why? – Fate Riddle Apr 12 '19 at 09:39
  • 3. And honestly do you think react-transition-group is still the go to option for react animations? Do you use something else like react-spring? – Fate Riddle Apr 12 '19 at 09:41
  • It needs `unmountOnExit` to remove it from the `DOM`. Otherwise, it's always present (hence the flashing animation you were getting). I personally don't use animations. While they may look great on screen, they can take up valuable resources and add unnecessary wait times. Most web applications (like target, reddit, and imgur) have very few (if any) animations. Performance is prioritized over "cool". – Matt Carlotta Apr 13 '19 at 17:01