[英]CSS Transition delaying DOM/scope update in AngularJs
It seems when I apply css transitions, the dom/scope updates get delayed as well. 似乎当我应用CSS过渡时,dom /作用域更新也会延迟。
I have a list that can be paged. 我有一个可以分页的列表。 When the top div wrapper of each list-element
.tl-container
当每个列表元素
.tl-container
的顶部div包装器时
<div class="tl-container" ng-repeat="elem in analysisMetaList.list">
...
</div>
gets the css transition 获取CSS过渡
.tl-container {
...
transition: background-color 150ms ease-out; /* for smoother hover effect*/
}
.tl-container:hover {
background-color: #ecf0f1;
}
The updates are delayed and I can see the old list for the transition time (so if it would be 3 sec, the old list would stay there for 3sec): 更新被延迟了,我可以看到过渡时间的旧列表(因此,如果是3秒,旧列表将在那里停留3秒):
wheras when I only delete this css transition and keep everything else the same, it works as expected: 当我仅删除此css转换并保持其他所有内容不变时,它按预期运行:
analysisMetaList.list
is a normal array that will be filled through a http call (simplyfied code) 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");
});
}]);
The whole page is data heavy, but fast enough - although it does not seem to have anything to do with performance. 整个页面的数据量很大,但是足够快-尽管它似乎与性能没有任何关系。
As a side note: the same bug happend with simple ng-show
(where entering a value in a textfield lets the textfield disappear and the not-editable value will be shown) 附带说明:同一错误发生在简单的
ng-show
(在文本字段中输入值会使文本字段消失,并且将显示不可编辑的值)
I tryed recreating the bug with a simple plunkr but I couldn't. 我尝试用一个简单的plunkr重现该错误,但我做不到。 I additionally use the angular-route and angular-animate plugins.
我还使用了angular-route和angular-animate插件。
Tested with angular 1.3 & 1.2 on chrome & firefox 已在Chrome和Firefox上用Angle 1.3和1.2测试
Is this a known angular or javascript issue? 这是已知的angular或javascript问题吗?
ngAnimate is going to use that css trasition timing to base any of the standard directives so ng-show and ng-repeat may wait on it and will put all of the css on that element style. ngAnimate将使用该css转换时间作为任何标准指令的基础,因此ng-show和ng-repeat可能会等待它,并将所有css置于该元素样式上。 You can try to cancel animation on that element with.
您可以尝试使用取消该元素上的动画。
$animate.enabled(false, element);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.