Angular/CSS - 动态添加新元素时以动画方式移动内容

Question

这里是角度动画菜鸟。

我可以使用 成功地将内容制作成动画到页面上ngAnimate。但是，当我的新内容滑入时，其下方的所有内容都会跳至新位置。同样，当新内容被删除时，后续内容会跳回来。是否有一种有角度的方式来动画以下内容的新位置？

<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 让我了解了大部分内容，而这篇博文正是缺失的部分。

解决方案：

1. 将按钮放在 div 内
2. max-height将div 的首字母设置为0px
3. 指定 divmax-height属性的转换
4. 当要显示按钮时，增加max-heightdiv的属性

更新的代码：

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