title: Angular/CSS - Animate shifting of content when new elements are dynamically added
body: <p>Angular animation noob here. </p>
  
  <p>I can successfully animate content onto the page using <code>ngAnimate</code>. However, when my new content slides in, all of the content below it jumps down to its new position. Likewise, when the new content is removed the following content jumps back up. Is there an angular way to animate the new position of the following content?</p>
  
  <pre><code>&lt;button class="button" ng-if="typingResponse"&gt;
      Submit!
  &lt;/button&gt;
  &lt;div class="response-section"&gt;
    &lt;label class="item item-input item-stacked-label"&gt;
      &lt;span class="input-label"&gt;Response&lt;/span&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  
  .button.ng-enter {
    -webkit-animate: slideInLeft 1s;
    animation: slideInLeft 1s;
  }
  .button.ng-leave {
    -webkit-animate: slideOutLeft 1s;
    animation: slideOutLeft 1s;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/n1aX8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n1aX8.gif" alt="enter image description here"></a></p>