How to make elements float up when deleting an element above with ngAnimate

Question

I have a list of Elements which I can add and delete.

<div id="container" ng-repeat="element in elements">
    <button ng-click="remElement($index)">x</button>
</div>

Now as you can see in my Fiddle, when you delete an element, it goes up and disappears. I find it unpleasant how the element under the element which was deleted waits till the animation is over and then hops up. Is there a way to make the element float up smoothly instantly when the element above starts to go up?

Answer 1

Not sure if this is what you're looking for but I think you can easily accomplish that by adding height into the container css elements, like this:

#container.ng-enter.ng-enter-active,
#container.ng-leave {
    opacity: 1;
    top: 0px;
    height:80px;
}

#container.ng-leave.ng-leave-active,
#container.ng-enter {
    opacity: 0;
    top: -50px;
    height:0px;
}

Hope this helps.