Angular/CSS - Animate shifting of content when new elements are dynamically added

Question

Angular animation noob here.

I can successfully animate content onto the page using ngAnimate. 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?

<button class="button" ng-if="typingResponse">
    Submit!
</button>
<div class="response-section">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Response</span>
    <textarea></textarea>
  </label>
</div>


.button.ng-enter {
  -webkit-animate: slideInLeft 1s;
  animation: slideInLeft 1s;
}
.button.ng-leave {
  -webkit-animate: slideOutLeft 1s;
  animation: slideOutLeft 1s;
}

Answer 1

@klauskpm got me most of the way there, and this blog post was the missing piece.

Solution:

1. Put the button inside of a div
2. Set the initial max-height of the div to 0px
3. Specify a transition on the div's max-height property
4. When the button is to be displayed, increase the max-height property of the div

Updated code:

<div class="button-container" ng-class="{'has-button': typingResponse}">
  <button class="button" ng-if="typingResponse">
    Submit
  </button>
</div>
<div class="response-section">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Response</span>
    <textarea></textarea>
  </label>
</div>

.button.ng-enter {
  -webkit-animate: slideInLeft $slide-dur;
  animation: slideInLeft $slide-dur;
}
.button.ng-leave {
  -webkit-animate: slideOutLeft $slide-dur;
  animation: slideOutLeft $slide-dur;
}


.button-container {
  max-height: 0px;
  transition: max-height $slide-dur linear;
  -webkit-transition: max-height $slide-dur linear;
}

.button-container.has-button {
  max-height: 100px;
}