Angularjs 为ng重复块中的浮动项目设置动画

我正在与angularjs和ngAnimate合作，但遇到了如何处理动画的问题。我有一个

ng repeat

，它显示一系列浮动块，允许用户单击其中的链接并导航到页面的较低级别（加载新级别数据）。如果单击其中一个链接，我会用新级别的块更新

$scope.items

数组，这就是动画行为笨拙的地方。现有区块在淡出时向下滑动，以便为淡入的新区块腾出空间。我希望淡出现有块，然后淡入新块（而不是同时淡入）。我已经尝试了我能想象到的每一件事来延迟“进入”动画，给“离开”动画时间来完成，但到目前为止，结果是空的

myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.items = [0, 1, 2, 3, 4];
    $scope.navigate = function () {

        var newItems = [];

        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }

        //clear out items array (starts the leave animation)
        $scope.items = [];

        //wait 1s for leave animation to complete then re-populate the items array
        $timeout(function(){
            $scope.items = newItems;
        }, 1000);

    };
}]);

我将我的应用程序浓缩到这个简单的示例中，

ng click

中的

navigate（）

函数通常对新数据发出

$http

请求，但我只是将其设置为返回修改后的数据（动画行为与我的应用程序中发生的完全匹配，而无需与

$http

请求和数据处理共享我的完整应用程序的开销）

非常感谢您的帮助。谢谢。

Javascript:

问题演示：

粗俗的回答：

我可以使用

$timeout

模块延迟新项目。基本上，我会清除

$scope.items

，等待1秒，然后用新数据填充它。我真的希望有更好的方法来实现这一点，但我想我会分享这一点，因为这是我迄今为止找到的唯一解决方案

myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.items = [0, 1, 2, 3, 4];
    $scope.navigate = function () {

        var newItems = [];

        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }

        //clear out items array (starts the leave animation)
        $scope.items = [];

        //wait 1s for leave animation to complete then re-populate the items array
        $timeout(function(){
            $scope.items = newItems;
        }, 1000);

    };
}]);

myApp.controller（'MyCtrl'，['$scope'，'$timeout'，函数（$scope，$timeout）{
$scope.items=[0,1,2,3,4]；
$scope.navigate=函数（）{
var newItems=[]；
对于（i=0；i<$scope.items.length；i++）{
newItems.push（$scope.items[i]+4）；
}
//清除项目数组（开始离开动画）
$scope.items=[]；
//等待1s，等待离开动画完成，然后重新填充项目数组
$timeout（函数（）{
$scope.items=newItems；
}, 1000);
};
}]);

---

“正在工作”黑客演示：

Angular通过委托给css来处理动画，这意味着Angular一旦设置/删除了一个显示/取消显示元素上的类，imo就不知道动画将花费多少时间，因为它现在在css世界中。您想要实现的是需要一个可以设置为u的动画结束回调使用jquery/jqlite动画功能，可能是在一个精心编制的指令中？这就是我正在努力解决的问题…用javascript处理一些动画计时，用CSS处理一些动画计时，这似乎是“黑客行为”（即我在下面发布的黑客回答）。CSS动画的结尾实际上有一个回调，请检查这个

.block {
    background: #e6e6e6;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    opacity: 1;
}

/* animation css */
.block.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
.block.ng-enter.ng-enter-active {
    opacity: 1;
}
.block.ng-leave {
    -webkit-transition: .9s;
    transition: .9s;
    opacity: 1;
}
.block.ng-leave.ng-leave-active {
    opacity: 0;
}

myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.items = [0, 1, 2, 3, 4];
    $scope.navigate = function () {

        var newItems = [];

        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }

        //clear out items array (starts the leave animation)
        $scope.items = [];

        //wait 1s for leave animation to complete then re-populate the items array
        $timeout(function(){
            $scope.items = newItems;
        }, 1000);

    };
}]);