Geek Answers Handbook

Angular Animation 1.4 Too Fast

I had a problem with animation after upgrading from Angular 1.2 -> 1.4.

I am updating page transitions by changing the css class to a view container element. I am using ui-router and have an ng-class directive for an element. The user moves with arrows (event listener in app.run ()). This sets the class as the string variable "navDirection" (left / right) to $ rootScope.

After the update, it seems that $ rootScope.navDirection is installed AFTER the animation. Therefore, the animation is incorrect when the user changes direction.

Any suggestions and / or comments appreciated!

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; } } }; // ...
+5
source share
1 answer

ngAnimate is reorganized within version 1.4. It will not run Javascript and CSS animations at the same time. the same effect can now be achieved by introducing $ animateCSS into javascript specific animations. Moving animation starts, any animation that expects or acts on the basis of the parent class (using ngClass) will always end.

0
source

More articles:


All Articles