javascript - 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 transition 并保持其他一切不变时，它会按预期工作:

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