我在使用 ng-class
时遇到了一些奇怪的问题,我怀疑它与竞争条件有关。
这是 plunker example
这里是相关的js代码
self.slideLeft = function() {
if (self.end_index < self.list_of_stuff.length) {
self.direction = 'left';
debugger;
self.start_index = self.start_index + 4;
self.end_index = self.end_index + 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
self.slideRight = function() {
if (self.start_index > 0) {
self.direction = 'right';
debugger;
self.start_index = self.start_index - 4;
self.end_index = self.end_index - 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
这是相关的html
<div class="stuff-wrapper">
<div class="stuff"
ng-class="bCtrl.directionClass()"
ng-repeat="stuff in bCtrl.display_list">
{{stuff}}
</div>
</div>
这是动画。
.left.ng-enter,
.left.ng-leave {
-webkit-transition: all 1s ease-in-out;
}
.left.ng-enter {
transition-delay: 0.7s;
opacity: 0;
left: 10%;
}
.left.ng-enter-active {
opacity: 1;
left: 0;
}
.left.ng-leave {
opacity: 1;
left: -10%;
}
.left.ng-leave-active {
left: -20%;
opacity: 0;
}
这是一个左右滑动数字列表的简单应用。
如果按下左键,数字会向左滑动。
如果按下右键,数字会向右滑动。
但是我们看到,如果有方向的变化,数字会先滑错方向,后面的方向才是正确的。
我怀疑这是由于竞争条件造成的。
事实上,我看到 ng-class
在我使用调试器更改方向 self.direction
后没有立即应用。
这很好奇。
有没有办法解决这个问题?
最佳答案
引用这个(https://stackoverflow.com/a/21664152/2402929)问题的答案:
You need to make the changes to the $scope.elements after the css class is updated at the DOM. So you need to delay the DOM manipulation for one digest loop. This can be done by the $timeout service (please see this answer for more information AngularJS $evalAsync vs $timeout):
在您更新 CSS 类时,您的元素将在同一个摘要循环中被删除。意思是 - CSS 没有得到更新,元素只是被删除。
摘要循环将包含您的整个 ng-click 函数,因为对于所有 Angular 内置指令,代码都包含在 $scope.$apply 调用中。
澄清一下:
$scope.$apply() takes a function or an Angular expression string, and executes it, then calls $scope.$digest() to update any bindings or watchers.
您可以在此处阅读更多相关信息 (http://jimhoskins.com/2012/12/17/angularjs-and-apply.html)。
因此,解决您的问题的方法是将数组中的数据删除包装到一个 $timeout block 中,这将延迟一个摘要循环的 DOM 操作并将类的更改和数据的删除分开:
self.slideLeft = function() {
if (self.end_index < self.list_of_stuff.length) {
self.direction = 'left';
self.start_index = self.start_index + 4;
self.end_index = self.end_index + 4;
$timeout(function(){
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
});
}
}
self.slideRight = function() {
if (self.start_index > 0) {
self.direction = 'right';
self.start_index = self.start_index - 4;
self.end_index = self.end_index - 4;
$timeout(function(){
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
});
}
}
这是一个有效的 plunker: http://plnkr.co/edit/30wJhL?p=preview
关于javascript - ng-class 和动画的竞争条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37736912/