使用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