Simple transition for React component

Question

I have a React component that I show/hide based on a button toggle from within its parent component. Instead of just appearing/disappearing on the page, I would like to animate the mounting and unmounting of the component to make it look as if it was sliding down from, and back into the parent. The parent is always visible.

One important note is that there are also components within the first child. One of my attempts involving CSS transitions have resulted in these children being stuck in place when the first child slides up/down. Additionally, Child has no fixed height -- it could be 100px or 1000px.

This is my only animation in the application, so I don't really want to get anything too heavy to drive it. I'm struggling to find what other people are using for this kind of thing.

Answer 1

For that kind of simple animations I generally use CSSTransation . The idea is pretty simple, this component will attach some classes to your element depending on the component state (mounting, unmounting,...), and you have to provide css for the animation.

Answer 2

I finally solved this with a small package called react-animate-height .

<div>
  <AnimateHeight
    duration={ 500 }
    height={ height } 
  >
    <Child />
  </AnimateHeight>
</div>