在 ng-repeat 块中动画浮动项目答案

【问题标题】：Animating floated items in an ng-repeat block在 ng-repeat 块中动画浮动项目
【发布时间】：2015-02-12 13:18:44
【问题描述】：

我正在使用 angularjs 和 ngAnimate，但遇到了动画处理方式的问题。我有一个ng-repeat，它显示了一系列浮动块，允许用户单击其中的链接并导航到页面的较低级别（加载新级别数据）。如果单击其中一个链接，我会使用新关卡的块更新$scope.items 数组，这就是动画表现不佳的地方。现有块在淡出时向下滑动，以便为淡入的新块腾出空间。我想淡出现有块，然后淡入新块（不是同时）。我已经尝试了所有可以想象的事情来延迟“进入”动画以让“离开”动画有时间完成，但到目前为止都是空的。

我已经将我的应用程序提炼成这个简单的例子——ng-click 中的 navigate() 函数通常会向 $http 请求新数据，但我只是将其设置为返回修改后的数据（动画行为与我的应用程序中发生的完全匹配，而无需与$http 请求和数据处理共享我的完整应用程序的开销。

感谢您的帮助。谢谢。

Javascript：

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

        var newItems = [];

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

        $scope.items = newItems;

    };
}]);

HTML：

<div class="block" ng-repeat="item in items">
    <a href="" ng-click="navigate();">
        {{item}}
    </a>
</div>

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;
}

问题演示：jsfiddle

【问题讨论】：

Angular 通过委托给 css 来处理动画，这意味着一旦 Angular 在出现/消失的元素上设置/删除一个类，imo 它不知道动画将花费的时间，因为它现在在CSS 世界。你想要实现的需要一个可以使用 jquery/jqlite 动画功能设置的动画结束回调，可能在一个精心设计的指令中？
这就是我苦苦挣扎的地方……在 javascript 中处理一些动画时间并在 CSS 中处理一些动画时间似乎很“骇人听闻”。（即我在下面发布的 hacky 答案）。
其实css动画结束有回调，看stackoverflow.com/questions/6186454/…

标签： angularjs angularjs-ng-repeat css-animations ng-animate

【解决方案1】：

老生常谈的答案：

我可以使用$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);

    };
}]);

'Working' hacky 演示：jsfiddle

【讨论】：