Tengo una casilla de verificación que, cuando está marcada, expone parte de un formulario, por ejemplo:

 <label> <input name="postalAddressNeeded" type="checkbox" value={this.state.postalAddressNeeded} onChange={this.handlePostalCheckChange} /> My postal address is different my residential address </label> {postalAddressNeeded && <div> <AddressAutocomplete /> </div> } </div> }

Esto funciona, pero me gustaría animarlo para que se deslice hacia abajo cuando la casilla de verificación esté marcada. A ese efecto he creado:

 {postalAddressNeeded && <div className={`js-inactive ${postalAddressNeeded ? 'js-slide-down-show' : 'js-slide-down-hide'}`}> <AddressAutocomplete /> </div> }

y en mi CSS:

 .js-inactive { height: 0px; } .js-slide-down-show { height: auto; -webkit-transition: height .3s ease; } .js-slide-down-hide { height: 0px; -webkit-transition: height .3s ease; }

Sin embargo, esto no funciona: el elemento sigue apareciendo pero no hay animaciones.

He investigado otras formas de hacer este IE con el complemento react-transition-group , pero parece que funciona con elementos de renderizado.

¿Alguien sabría de una manera de lograr esto?