2015-05-29 10 views
5

Mam problem z animacją po aktualizacji z Angular 1.2 -> 1.4.Angular Animate 1.4 zbyt szybki

Animuję przejścia między stronami, zmieniając klasę css w widoku elementu kontenera. Używam ui-routera i mam dyrektywę klasy ng na elemencie. Użytkownik nawiguje za pomocą klawiszy strzałek (detektor zdarzeń w app.run()). Ustawi to klasę jako zmienną łańcuchową 'navDirection' (lewo/prawo) na $ rootScope.

Po aktualizacji wydaje się, że $ rootScope.navDirection jest ustawiona PO animacji. Tak więc animacja jest błędna, gdy użytkownik zmienia kierunek.

Wszelkie sugestie i/lub komentarze są mile widziane!

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

Czy mógłbyś stworzyć działającego Codepen tego, co pracujesz w tej chwili? –

Odpowiedz

0

ngAnimate jest refactored wewnętrznie w wersji 1.4. Nie będzie jednocześnie uruchamiać animacji JavaScript i CSS. ten sam efekt można osiągnąć teraz poprzez wstrzyknięcie $ animateCSS w animacje zdefiniowane w javascript. Przenoszenie animacji jest zawsze zakończone animacjami opartymi na klasach rodzicielskich (za pomocą ngClass).