React: How can I apply CSS transition effects when an element is rendered?

Question

I have a checkbox that, when checked, exposes part of a form, eg:

                        <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>
                    }

This works, but I'd like to animate it to slide down when the checkbox is checked. To that affect I have created:

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

and in my 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;
}

However this does not work - the element still appears but there are no animations.

I've investigated other ways of doing this IE with the react-transition-group plugin, but it looks like that does work with rendering elements.

Would anyone know of a way to achieve this?

Answer 1

Here is small sandbox , with some explanations in the styles.

In the comments, coot3 and Servesh Chaturvedi are both right, just combine their answers.