角度动画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太快

回答

相关问题