ng级和动画的比赛条件

我有一些奇怪的问题ng-class，我怀疑它与比赛条件有关。ng级和动画的比赛条件

这里是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后没有得到应用。

这很好奇。

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

来源

2016-06-09 testing

要从此（https://stackoverflow.com/a/21664152/2402929）问题引用答案：

您需要的CSS 类在DOM更新后进行更改到$ scope.elements。所以你需要延迟DOM操作一个摘要循环。这可以通过在$超时服务来完成（请参阅这个答案详细信息AngularJS $ evalAsync VS $超时）：在同一个消化循环被删除

你的元素，您要更新的CSS类。含义 - css不会被更新，并且元素会被删除。

摘要循环将包含您的整个ng-click函数，因为使用所有角度内置指令代码被包装在$ scope中。

为了阐明：

$范围$申请（）需要一个函数或一个角表达式字符串，和执行它，然后调用$范围$消化（）来更新任何绑定或观察者。。

你可以在这里阅读更多关于它（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);    
       }); 
      } 
     }

这里是一个工作plunker： http://plnkr.co/edit/30wJhL?p=preview

来源

2016-06-13 18:15:04 Nirri

ng级和动画的比赛条件

回答

相关问题