dynamic_height_transition.js

toggle(e) {
  e.preventDefault();
  let wrapperHeight = this.refs.transitionWrapper.clientHeight;
  if (this.state.expanded) {      
    this.setState({ expanded: false, submenuHeight: 0 }));   
  } else {
    this.setState({
      expanded: true,
      submenuHeight: wrapperHeight
    });
  }
}

<div className="submenu" ref="submenu" style={{ height: submenuHeight }}>
  <div ref="transitionWrapper">
    {childrens}
  </div>
</div>

.submenu {
  @include transition(height, 0.3s, ease-in);
  height: 0;
  overflow: hidden;
}