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

Posted 2023-03-06

【中文标题】Angular/CSS - 动态添加新元素时动画内容的移动

【英文标题】：Angular/CSS - Animate shifting of content when new elements are dynamically added

【发布时间】：2016-07-09 19:36:04

【问题描述】：

角动画菜鸟在这里。

我可以使用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;

【问题讨论】：

这是一个不错的 gif 动画，不幸的是，如果没有真正的 html+css 或更好的东西，它就毫无价值 - 一个工作示例

创建这个空间是因为在最终位置有一个元素在等待动画结束。当它做相反的事情时，它会使那个元素消失。您需要先为盒子设置动画，然后在动画完成后，开始您的动画。你的第二个动画需要做相反的事情。

@AlonEitan 添加了部分代码

@klauskpm 你对如何做到这一点有什么建议吗？如果我想首先为“响应”框设置动画，我需要知道传入的“提交”按钮的高度。但是，当我想要执行此动画时，按钮尚未在 DOM 上。

好的。我已经考虑了第二个想法，也许为您提供了一些更简单的解决方案。创建一个div 或您选择的任何元素，并将其高度设置为在CSS 上有一个transition。内容将是提交按钮，因此在创建时，外部框（您创建的 div）将执行动画以适应其内容，或者应该是这样。

【参考方案1】：

@klauskpm 让我大部分时间到达那里，而this blog post 是缺失的部分。

解决办法：

将按钮放在 div 内 设置div的初始max-height为0px 在 div 的 max-height 属性上指定一个过渡 要显示按钮时，增加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;