使用ng-class和动画的竞争条件

Question

我有一些奇怪的问题ng-class,我怀疑它与竞争条件有关.

这是一个有关的例子

这是相关的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

引用这个问题的答案(/sf/answers/1516490671/):

在DOM更新css类之后,您需要对$ scope.elements进行更改.所以你需要延迟一个摘要循环的DOM操作.这可以通过$ timeout服务来完成(有关AngularJS $ evalAsync vs $ timeout的更多信息,请参阅此答案):

在更新css类时,您的元素将在同一摘要循环中删除.含义 - css没有更新,元素只是被删除.

摘要循环将包含整个ng-click函数,因为所有角度内置指令代码都包含在$ scope.$ apply调用中.

澄清:

$ scope.$ apply()接受一个函数或一个Angular表达式字符串,并执行它,然后调用$ scope.$ digest()来更新任何绑定或观察者.

您可以在这里阅读更多相关信息(http://jimhoskins.com/2012/12/17/angularjs-and-apply.html).

因此,解决您的问题的方法是将数据从数组中删除到$ timeout块中,这将延迟一个摘要循环的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);            
              });
            }
        }

这是一个工作的插件:http://plnkr.co/edit/30wJhL？p = preview