I have the following plnkr: http://plnkr.co/edit/Pl5KaBkFouadAGKSB0Mt?p=preview
Every 3 seconds, a message with my name appears. When the message is not there, in it's place is a placeholder element, these two are accounted for in the following lines:
<div ng-switch="main.myValue">
<div ng-switch-when="true" class="animate">Mike</div>
<div ng-switch-default class="placeholder"></div>
</div>
My issue with this is that when Mike is animating out, for a brief moment both that div and the placeholder div become visible, so effectively the content underneath is pushed down (div class="more-stuff"). I'm having a hard time working around this, it seems that the correct way to do this involves using .ng-stagger on the placeholder but that seems like overkill and I am wondering if there is a more elegant solution to my problem?
One possible solution is to make placeholder element animateable too, and set position: absolute on ng-leave phase:
<div ng-switch="main.myValue">
<div ng-switch-when="true" class="animate">Mike</div>
<div ng-switch-default class="animate placeholder"></div>
</div>
and remove stagger CSS rules.