CSS 转换延迟 AngularJs 中的 DOM/范围更新

Question

似乎当我应用 css 转换时，dom/scope 更新也会延迟。

我有一个可以分页的列表。当每个列表元素的顶部 div 包装器 .tl-container

<div class="tl-container" ng-repeat="elem in analysisMetaList.list">
 ...
</div>

获取 css 转换

.tl-container {
    ...
    transition: background-color 150ms ease-out; /* for smoother hover effect*/
}
.tl-container:hover {
    background-color: #ecf0f1;
}

更新被延迟，我可以看到旧列表的过渡时间（所以如果它是 3 秒，旧列表将在那里停留 3 秒）：

当我只删除这个 css 过渡并保持其他一切不变时，它会按预期工作：

analysisMetaList.list是一个普通数组，将通过http调用填充（简化代码）

angular.module('app').controller('Ctrl', ['$scope','$http', function($scope, $http) {
    var analysisPerPage = 5;

    $scope.analysisMetaList={};

    function reloadAnalysisMetaList() {
        $http({
            method: 'GET',
            url: constants.getApiUrl() +"/analysis/",
            headers: {'If-None-Match': $scope.analysisMetaList.etag}})
            .success(function (data, status, headers, config) {
                $scope.analysisMetaList.list = data.splice(0,analysisPerPage);
                $scope.analysisMetaList.etag = headers("Etag");
            });
}]);

整个页面的数据量很大，但速度足够快——尽管它似乎与性能没有任何关系。

附带说明：简单的ng-show 也发生了同样的错误（在文本字段中输入值会使文本字段消失，并且将显示不可编辑的值）

I tryed recreating the bug with a simple plunkr but I couldn't. 我另外使用了 angular-route 和 angular-animate 插件。

在 chrome 和 firefox 上使用 angular 1.3 和 1.2 测试

---

这是一个已知的 Angular 或 javascript 问题吗？

Answer 1

ngAnimate 将使用该 css 转换时间来作为任何标准指令的基础，因此 ng-show 和 ng-repeat 可以等待它并将所有 css 放在该元素样式上。您可以尝试取消 该元素上的动画。

$animate.enabled(false, element);