ng-leave-active 在 div 的绝对定位列表上

Question

当我从绝对定位的 div 列表中删除元素时，该动作的 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：link

基本上发生的事情是元素立即被删除，另一个元素取代它，被删除元素的动画被执行但不可见，因为另一个元素在它上面（换句话说, angular 删除元素，重新渲染整个列表然后执行动画）。这就是当只有一个元素时动画效果很好的原因。

我需要的是先执行动画然后重新渲染整个列表。有人知道怎么做吗？

Answer 1

您还需要将转换应用于 left 属性。

所以改变

transition: opacity 1s linear;

到

transition: all 1s linear;

或

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

ng-leave-active 在 div 的绝对定位列表上

ng-leave-active on absolute positioned list of divs

css

css-transitions

angularjs

angularjs-ng-repeat

angularjs-animation