Есть пупап (блок с абсолютным позиционированием) его размеры должны зависеть от контента внутри.
Внутри него находится ReactCSSTransitionGroup и два блока. Они меняются между собой в зависимости от state компонента. Как сделать так, что бы при анимации (opacity, например) они накладывались друг на друга и размер родителя был по размеру большего элемента?
UPD (макет):
<ReactCSSTransitionGroup transitionName="authorize-change" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
{ this.state.stage == "form" ? (
<div>
<!--Логин-форма-->
</div>
) : null }
{ this.state.stage == "captcha" ? (
<div className="google-captcha">
<!--captcha-->
</div>
) : null }
</ReactCSSTransitionGroup>