title: React: How can I apply CSS transition effects when an element is rendered?
body: <p>I have a checkbox that, when checked, exposes part of a form, eg:</p>
  <pre><code>                        &lt;label&gt;
                              &lt;input
                                  name=&quot;postalAddressNeeded&quot;
                                  type=&quot;checkbox&quot;
                                  value={this.state.postalAddressNeeded}
                                  onChange={this.handlePostalCheckChange}
                              /&gt;
                              My postal address is different my residential address
                          &lt;/label&gt;
  
                          {postalAddressNeeded &amp;&amp;
                              &lt;div&gt;
                                  &lt;AddressAutocomplete /&gt;
                              &lt;/div&gt;
                          }
                      &lt;/div&gt;
                      }
  </code></pre>
  <p>This works, but I'd like to animate it to slide down when the checkbox is checked. To that affect I have created:</p>
  <pre><code>{postalAddressNeeded &amp;&amp;
    &lt;div className={`js-inactive ${postalAddressNeeded ? 'js-slide-down-show' : 'js-slide-down-hide'}`}&gt;
     &lt;AddressAutocomplete /&gt;
    &lt;/div&gt;
  }
  </code></pre>
  <p>and in my CSS:</p>
  <pre><code>.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;
  }
  </code></pre>
  <p>However this does not work - the element still appears but there are no animations.</p>
  <p>I've investigated other ways of doing this IE with the <code>react-transition-group</code> plugin, but it looks like that does work with rendering elements.</p>
  <p>Would anyone know of a way to achieve this?</p>