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

Question

Angular 动画菜鸟在这里。

我可以使用 ngAnimate 成功地将内容动画化到页面上。然而，当我的新内容滑入时，它下面的所有内容都会跳到新位置。同样，当删除新内容时，以下内容会跳回。是否有 Angular 的方式来为以下内容的新位置设置动画？

<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 让我完成了大部分工作，this blog post是缺失的部分。

解决方案:

1. 将按钮放在 div 中
2. 设置div的初始max-height为0px
3. 在 div 的 max-height 属性上指定过渡
4. 当要显示按钮时，增加div的max-height属性

更新代码:

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