Farklı ng animasyonlarına izin vermek için kullanıcı arabirimine bir sınıf uygulamalısınız

Question

ui-view kullanarak mevcut duruma bağlı olarak farklı animasyonlar uygulamam gerekiyor. Ben kodu aşağıdakilere sahip this question..

itibaren ardından (düzenlemek: plunker preview bakınız)

<section ui-view ng-class="stateClass"></section> 

stateClass her denetleyicisi uygulanan alır:

.controller('loginController', function($scope, $state) { 
    // Set state class name 
    $scope.stateClass = 'slide-left'; 
    console.log($scope); 

Bu çalışır ve sınıf ince ekledi alır - ancak bu animasyon tek vuruşta başlamaz.

ui-view kodunu güncellersek:

kodlanmış sınıfla, bu çalışır (ancak şimdi farklı animasyonlar uygulayamıyorum).

ng-classng-enter sonra eklenir mi? Birisi animasyonlara nasıl ulaşılacağını önerebilir mi?

düzenlemek >> Garip bir şekilde yeterli ng-leave animasyonları düzgün çalışıyor. Yeni eleman oluşturulan için

.directive('stateClass', ['$state', function($state) { 
    return { 
     link: function($scope, $element, $attrs) { 
      var stateName = $state.current.name || 'init', 
       normalizedStateName = 'state-' + stateName.replace(/\./g, '-'); 
      $element.addClass(normalizedStateName); 
     } 
    } 
}]); 

ng-enter üzerinde, ui-view mevcut durum adı (devlet katacak Ama css hala ng-enter

Answer 1

için geçerli değildir direktifi state-class izleyerek ui-görünüme ekle geçişi yapar. Kaybolacak olan eleman için, daha önce yaratılmış olanın aynısı kalır.

Aşama 1:

geçiş main devlet modal için: Örneğin

main durum aktif:

<ui-view state-class class="state-main ng-scope"></ui-view> 

2. Aşama: $state.go('modal');

<ui-view state-class class="state-modal ng-animate ng-enter ng-enter-active"></ui-view> 
<ui-view state-class class="state-main ng-animate ng-leave ng-leave-active"></ui-view> 

başlat

Faz 3: modal durumu etkin

<ui-view state-class class="state-modal"></ui-view>