title: Animate height based on children's height
body: <p>I have a container — imagine that it contains pages in an app. I’m using animate.css to slide from a page to another. Pages have different heights (according to their content), so the container has to resize to accommodate.</p>
  
  <p><strong>I can’t for the life of me get the height to animate!</strong></p>
  
  <p>The CodePen (and the following code) demonstrate a working sliding animation between pages but the container's height just changes instantly.</p>
  
  <p><a href="http://codepen.io/anon/pen/jqbExY" rel="nofollow">http://codepen.io/anon/pen/jqbExY</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id=btn&gt;animate&lt;/button&gt;
  &lt;main&gt;
    &lt;section class="first"&gt;Little content&lt;/section&gt;
    &lt;section class="second"&gt;Lots of content ........&lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>button {
    display: block;
    margin: auto;
  }
  
  main {
    border: 1px solid black;
    width: 400px;
    margin: auto;
    min-height: 100px;
    height: auto;
    transition: height 1s linear;
  }
  
  .first {
    background-color: red;
  }
  
  .second {
    background-color: green;
    display: none;
  }
  
  .leave {
    position: absolute;
  }
  </code></pre>
  
  <p>JavaScript (jQuery just for demonstration, in reality I'm using Angular):</p>
  
  <pre><code>$('#btn').on('click', function() {
    var $first = $('.first');
  
    $first.addClass('slideOutLeft animated leave').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
      function(e) {
        $first.hide();
      });
    $('.second').addClass('slideInRight animated').show();
  });
  </code></pre>