title: AngularJS/ng-animate - Cross-fade animation with dynamic content
body: <p>I have a container on my page, which has a background and a min-height. Inside the container, I have several "page" divs which are toggled with ng-if logic. These pages are dynamic, so the parent container's height depends on the height of these children. The basic structure is like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="page"&gt;
        Page 1
     &lt;/div&gt;
     &lt;div class="page"&gt;
        Page 2
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So far, so good. Toggling between these pages works as I expect, and the container height stretches as required. However, I need to add a cross-fade transition between the pages, so that they nicely fade into each-other. To do this, I need to absolutely position the "page" elements within the container, so that the DOM does not jump around during the transition. However, obviously, this removes them from the document flow, and prevents the parent container from taking its height correctly. As the rest of my DOM relies on this height, it breaks my layout.</p>
  
  <p>I have created a basic pen to illustrate the problem - uncomment the position: absolute in the second line to see how the cross fade should look:</p>
  
  <p><a href="http://codepen.io/JarredMack/pen/xbzWgx" rel="nofollow">http://codepen.io/JarredMack/pen/xbzWgx</a></p>
  
  <p>Is there an elegant solution to this problem that doesn't require recalculating heights on the fly with Javascript?</p>