索引变化时的 AngularJS 动画

Question

我在使用 AngularJS 和 CSS3 动画时遇到问题。

我目前有一个 ng-repeat 元素，这些元素的样式取决于它们的索引。我有适当的 CSS3 动画属性，但我似乎无法在每个元素的 $index 发生变化(通过 orderBy)时让元素进行动画处理。

这是我的 ng-repeat 列表:

<li ng-repeat="video in videos | orderObjectBy:'order'" ng-style="{left: (($index * 160) + ($index * 15) + 'px')}">
    {{ video.title }}
</li>

我的 CSS3:

ul li {
    -webkit-transition: all 3s ease !important;
    -moz-transition: all 3s ease !important;
    transition: all 3s ease !important;
}

我的 orderObjectBy 过滤器:

.filter('orderObjectBy', function(){
    return function(input, attribute) {
        if (!angular.isObject(input)) return input;

        var array = [];
        for(var objectKey in input) {
            array.push(input[objectKey]);
        }

        array.sort(function(a, b){
            a = parseInt(a[attribute]);
            b = parseInt(b[attribute]);

            if (!a && b) return 1;
                else if (a && !b) return -1;
                else if (a === b) return 0;
                else return (a > b) ? 1 : (b > a ? -1 : 0)

        });

        return array;
    }
});

这是一个 JSFiddle:http://jsfiddle.net/jakemulley/Y8L5L/

正如您在 JSFiddle 中看到的，当您点击一个视频时，它会“跳”到前面，因为它的索引已更改。这就是我想要的动画 - 而不是跳跃。

有什么想法吗？

谢谢大家!

Answer 1

您之前必须配置您的动画 CSS 代码，正如动画指南所说，并且您正在使用 ngRepeat，因此，您应该阅读:https://docs.angularjs.org/api/ng/directive/ngRepeat#usage_animations .

查看 Plunker:http://plnkr.co/edit/VXg7x0PXDyNw5YEbbDLI .在我的 Plunker 上，我也在使用 ngRepeat，所以你应该在阅读后看到示例。