Анимационный компонент сразу после рендеринга

Question

У меня есть компонент реакции, который принимает два других компонента, первый из которых всегда отображается, а второй - только в том случае, если компонент выбран.

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

почему бы не использовать @keyframes и @ -moz-keframes с классами CSS