CSS Transition在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.我还使用了角度路径和角度动画插件。

测试角度为1.3＆amp; 1.2关于chrome＆amp;火狐

---

这是一个已知的角度或JavaScript问题吗？

Answer 1

ngAnimate将使用该css trasition计时基于任何标准指令，因此ng-show和ng-repeat可能会等待它并将所有css放在该元素样式上。你可以尝试取消 与该元素的动画。

$animate.enabled(false, element);