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