0

当我从绝对定位的 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：链接

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

我需要的是首先执行动画，然后重新渲染整个列表。有谁知道如何做到这一点？

4

1 回答 1

1

您还需要对left属性应用过渡。

所以改变

transition: opacity 1s linear;

到

transition: all 1s linear;

或者

transition: opacity 1s linear, left 1s linear;
于 2015-10-23T22:15:25.223 回答