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让我大部分都在那里，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;
}