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級和動畫的比賽條件

回答

相關問題