ng-left-active для списка абсолютных позиций div

Question

Когда я удаляю элемент из списка элементов с абсолютным позиционированием, анимация ngAnimate для этих действий не выполняется должным образом. Ниже приведен пример

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: ссылка

В основном происходит то, что элемент немедленно удаляется, другой элемент занимает свое место, и анимация для удаленного элемента выполняется, но не отображается, так как другой элемент находится поверх него (другими словами, angular удаляет элемент, перерисовывает весь список и выполняет анимацию). Вот почему анимация работает нормально, когда есть только один элемент.

Что мне нужно, это сначала выполнить анимацию, а затем перерисовать весь список. Кто-нибудь знает как это сделать?

Answer 1

Вы должны применить переход также к left имущество.

Так что меняй

transition: opacity 1s linear;

в

transition: all 1s linear;

или же

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