2015-05-29 3 views
5

У меня проблема с анимацией после обновления от Angular 1.2 -> 1.4.Угловой Анимация 1.4 слишком быстрая

Я обновляю переходы страниц, меняя класс css на элемент контейнера вида. Я использую ui-router и имею директиву ng-класса для элемента. Пользователь перемещается со стрелками (прослушиватель событий в app.run()). Это устанавливает класс как строчную переменную 'navDirection' (влево/вправо) на $ rootScope.

После обновления кажется, что $ 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; 
      } 
     } 
    }; 

// ... 
+0

Не могли бы вы настроить рабочий код того, что у вас есть на данный момент? –

ответ

0

ngAnimate является переработан внутренне в версии 1.4. Он не будет одновременно запускать анимацию Javascript и CSS. тот же эффект может достигнуть теперь, введя $ animateCSS в javascript определенные анимации. Сдвигающаяся анимация всегда будет заканчиваться на ожидающие или активные анимации на основе родительского класса (с использованием ngClass).

Смежные вопросы