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

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:
Put the button inside of a div
Set the initial max-height of the div to 0px
Specify a transition on the div's max-height property
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;
}