使用 ng-animate 时偏移占位符元素的正确方法是什么？

Question

我有以下plnkr：http://plnkr.co/edit/Pl5KaBkFouadAGKSB0Mt?p=preview

每隔 3 秒，就会出现一条带有我名字的消息。当消息不存在时，取而代之的是一个占位符元素，这两个在以下几行中说明：

<div ng-switch="main.myValue">
  <div ng-switch-when="true" class="animate">Mike</div>
  <div ng-switch-default class="placeholder"></div>
</div>

我的问题是，当 Mike 动画结束时，在短时间内 div 和占位符 div 都变得可见，因此有效地推送了下面的内容向下 (div class="more-stuff")。我很难解决这个问题，似乎正确的方法是在占位符上使用 .ng-stagger 但这似乎有点矫枉过正，我想知道是否有更优雅的解决方案来解决我的问题？

Answer 1

一个可能的解决方案是使占位符元素也可以动画化，并在 ng-leave 阶段设置 position: absolute：

<div ng-switch="main.myValue">
    <div ng-switch-when="true" class="animate">Mike</div>
    <div ng-switch-default class="animate placeholder"></div>
</div>

并删除交错 CSS 规则。

演示： http://plnkr.co/edit/0uhnSNI69N2QMoB7k7sx?p=preview

使用 ng-animate 时偏移占位符元素的正确方法是什么？

What is the correct way to offset for a placeholder element when using ng-animate?

css

angularjs

ng-animate