React-transition-group: Slide down animation

[Medsestrun]

How to create slide down animation in https://jsfiddle.net/m4mb9Lg3/4/?
I tried setting height to 0 and my element height, max-height tricks and nothing worked for me for adding or removing item.

.fade-asset-enter {
  opacity: 0.01;
  height: 0;
}
.fade-asset-enter-active {
  opacity: 1;
  height: 45px;
  transition: all 500ms ease-in;
}
.fade-asset-exit {
  opacity: 1;
  height: 45px;
}
.fade-asset-exit-active {
  opacity: 0.01;
  height: 0;
  transition: all 500ms ease-in;
}

[jquense]

Height animation/transitions generally require actually measuring the nodes, setting explicit heights, and moving between them, and is really the most surprisingly difficult sort of css transition to do :/. I'd take a look at how we did it in react-bootstrap, using the plain bootstrap css as the starting point: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Collapse.js Notice all the additional bits

[silvenon]

This is more of a general CSS question. If you think there's something we should change in react-transition-group, let me know and I'll reopen. 😉

[frankwallis]

you could also try https://github.com/frankwallis/react-slidedown

[nodox]

Good to know, but this should be a bit more visible. Spent 3 days in hopeless despair trying to make slide down/up animations work RTG.

[silvenon]

What exactly? That animating from 0 to auto is impossible in CSS? Or that you should add overflow: hidden to hide content that is overflowing the container?