Каков правильный способ смещения элемента-заполнителя при использовании 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

Одно из возможных решений, чтобы сделать заполнитель элемент animateable тоже, и установить 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