CSS Transition在AngularJs中延遲DOM /範圍更新

看來，當我應用css轉換時，dom/scope更新也會延遲。CSS Transition在AngularJs中延遲DOM /範圍更新

我有一個可以分頁的列表。當每個列表元素.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秒鐘）：

showcase delayed

wheras時，我只能刪除這個CSS過渡和記p一切一樣，它按預期工作：

showcase normal

analysisMetaList.list是正常的陣列將通過HTTP調用（simplyfied代碼）

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"); 
      }); 
}]);

整個頁面充滿的數據重，但速度夠快 - 儘管它與性能似乎沒有任何關係。

作爲邊注：同錯誤happend簡單ng-show（其中在文本字段中輸入一個值讓文本框消失，不可編輯的值將被示出）

I tryed recreating the bug with a simple plunkr but I couldn't.我另外使用所述角度路徑和角動畫插件。

測試與角1.3 & 1.2鉻&火狐

這是一個已知的角度或JavaScript的問題？

來源

2014-11-08 for3st

ngAnimate將使用該css trasition時序來基於任何標準指令，以便ng-show和ng-repeat可以等待它，並將所有css放在該元素樣式上。您可以嘗試使用該元素取消動畫。

$animate.enabled(false, element);

來源

2014-11-08 22:23:05 Dylan

你說得對，它是ng-animate模塊。我沒有爲你的解決方案提供便利，因爲我不是真的需要這個模塊，而是暫時禁用它。 – for3st 2014-11-09 01:04:44

CSS Transition在AngularJs中延遲DOM /範圍更新

回答

相關問題