react css animation when component mounts

Here's a fiddle of what I want to do: https://jsfiddle.net/s7s07chm/7/

But I want to do this with react instead of jquery. Basically, I put the className of the element in the state, and on componentDidMount I update the className to initiate the transition.

But this isn't working. The component is just rendering with the transitioned state. In other words, instead of sliding down, it appears at the bottom from the beginning

Am I doing this wrong? If so, is there another way to accomplish this?

here's the actual code

getInitialState: function() {
  return {
    childClass: 'child'
  };
},
componentDidMount: function() {
  this.setState({
    childClass: 'child low'
  });
},