javascript - ng-class 和动画的竞争条件

Question

我在使用 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 后没有立即应用。

这很好奇。

有没有办法解决这个问题？

Answer 1

引用这个(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