ng-leave-active on absolute positioned list of divs

Question

When I remove element from the list of absolute positioned divs, the ngAnimate animation for that actions is not performed as expected. Below is an example

HTML

<div ng-app="myApp">
    <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Remove element</button>  
        <div class='myDiv' ng-repeat="item in items" style="left:{{$index*100}}px;top:50px">
            {{item}}
        </div>
    </div>
</div>

CSS

.myDiv{
    position: absolute;    
    width:100px;
    height:100px;
    background-color:#432344;
    -webkit-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity 1s linear;
    opacity: 1;
    border: 5px solid #123123;
}
.myDiv.ng-leave-active {
    opacity: 0;
}

JavaScript

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.items = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6' ];
    $scope.clicked = function(){
       $scope.items.splice(0,1);       
    }
  });

JSFiddle: link

Basically what's happening is that the element is immediately removed, the other element takes its place, and the animation for the removed element is executed but is not visible, since the other element is on top of it (in other words, angular removes element, rerenders whole list and than executes animation). That's why the animation works fine, when there's only one element.

What I need is to first execute animation and then rerender the whole list. Does anyone know how to do this?

Answer 1

You need to apply transition also to the left property.

So change

transition: opacity 1s linear;

to

transition: all 1s linear;

or

transition: opacity 1s linear, left 1s linear;