レンダリング直後のコンポーネントのアニメーション

Question

2つの他のコンポーネントを受け取る反応コンポーネントがあります。最初のコンポーネントは常にレンダリングされ、2番目のコンポーネントはコンポーネントが選択されている場合に限り表示されます。

ExpandableItem：

const propTypes = { 
    header: PropTypes.element.isRequired, 
    content: PropTypes.element.isRequired, 
    isSelected: PropTypes.bool.isRequired 
}; 

export default class ExpandableItem extends React.Component { 
    render() { 
     return (<li> 
      {this.props.header} 
      {this.props.isSelected && this.props.content} 
     </li>); 
    } 
} 

ExpandableItem.propTypes = propTypes; 

とコンテンツが表示されたときに、コンポーネントの高さがはるかに大きくなり、私はそれがアニメーションになりたいです。

どうすればいいですか？

Answer 1

なぜあなたは[ `ReactCSSTransitionGroup`]（https://facebook.github.io/react/docs/animation.html）に見たことが