CSS过渡延迟AngularJs中的DOM /范围更新

Question

似乎当我应用CSS过渡时，dom /作用域更新也会延迟。

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

<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 （在文本字段中输入值会使文本字段消失，并且将显示不可编辑的值）

我尝试用一​​个简单的plunkr重现该错误，但我做不到。 我还使用了angular-route和angular-animate插件。

已在Chrome和Firefox上用Angle 1.3和1.2测试

---

这是已知的angular或javascript问题吗？

Answer 1

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

$animate.enabled(false, element);