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;
}

This is a nice gif animation, unfortunately it's worthless without the real html+css or better yet - a working example — Alon Eitan, Mar 22 '16 at 18:36
This space is created because there is an element at the final position waiting for the animation to end. When it does the opposite, it makes that element disappear. You will need to animate first the box, and after that animation been completed, start your animation. The opposite needs to be done to your second animation. — klauskpm, Mar 22 '16 at 18:37
@klauskpm do you have any advice on how to do that? If I want to animate the "Response" box first, I would need to know the height of the incoming "Submit" button. However, at the point when I would want to perform this animation the button is not yet on the DOM. — Benny B, Mar 22 '16 at 18:59
Ok. I've given a second thought and maybe some easier solution for you. Create a `div` or any element of your choise, and set it's height to have a `transition` on CSS. The content would be that submit button, so when created, the outter box(the div you created) would do an animation to fit it's content, or that's how it should be. — klauskpm, Mar 22 '16 at 19:03
@klauskpm awesome! took your advice and came up with the solution below. thanks very much. — Benny B, Mar 22 '16 at 19:27

score 4 · Accepted Answer · answered Mar 22 '16 at 19:26

@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;
}

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

1 Answers1