角度動畫1.4太快

從Angular 1.2 - > 1.4更新後，動畫有問題。角度動畫1.4太快

我通過更改視圖容器元素上的css類來爲頁面轉換添加動畫效果。我使用ui-router並在元素上有ng-class指令。用戶使用箭頭鍵導航（app.run（）中的事件監聽器）。這將該類設置爲$ rootScope上的字符串變量「navDirection」（左/右）。

更新後似乎在動畫後設置了$ rootScope.navDirection。所以當用戶改變方向時動畫是錯誤的。

任何建議和/或意見表示讚賞！

的index.html

<body ng-cloak ng-keydown="handleEvt($event)"> 
    <div class="page-wrapper page-wrapper--constrain" ng-class="{'page-wrapper--decorate' : decoratePageContent === true}"> 
     <div class="page-content group position-context"> 
      <div ui-view class="slide" ng-class="{'at-view-slide-in-left at-view-slide-out-right': navDirection == 'right', 'at-view-slide-in-right at-view-slide-out-left': navDirection == 'left'}"></div> 
     </div> 
    </div> 
</body>

app.js

var app = angular.module('my-app', [ 
    'ui.router', 
    'ngAnimate' 
]); 

// ... 

app.run(function ($rootScope, navigationService) { 

    $rootScope.handleEvt = function(e) { 
     if ($rootScope.navVisible) { 
      switch (e.which) { 
       // right 
       case 37: 
        $rootScope.navDirection = "right"; 
        navigationService.navigate(navigationService.getCurrentPageIndex() - 1); 
        break; 
       // left 
       case 39: 
        $rootScope.navDirection = "left"; 
        navigationService.navigate(navigationService.getCurrentPageIndex() + 1); 
        break; 
      } 
     } 
    }; 

// ...

來源

2015-05-29 olefrank

你能設置一個你正在工作的工作Codepen嗎？ –

ngAnimate在1.4版本的內部重構。它不會同時運行Javascript和CSS動畫。現在可以通過將$ animateCSS注入到javascript定義的動畫中來實現同樣的效果。移動動畫觸發將始終結束任何掛起或活動的基於父類的動畫（使用ngClass）。

來源

2015-06-06 15:59:28 ReeganLourduraj

角度動畫1.4太快

回答

相關問題