Wenden Sie eine Statusklasse auf ui-view an, um verschiedene ng Animationen zu ermöglichen.

Question

Ich muss verschiedene Animationen anwenden, abhängig vom aktuellen Status unter Verwendung von ui-view. Im Anschluss an this question..

ich die folgenden Code habe (edit: siehe plunker preview)

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

stateClass in jedem Controller zB angewandt wird:

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

Dies funktioniert und die Klasse wird hinzugefügt fein - aber die Animation tritt nicht ein.

Wenn ich den ui-view Code zu aktualisieren:

mit der Klasse hardcoded, das funktioniert (aber jetzt kann ich nicht verschiedene Animationen anwenden).

Wird ng-class nach ng-enter hinzugefügt? Kann jemand vorschlagen, wie man die Animationen erzielt?

bearbeiten >> Seltsamerweise ng-leave Animationen funktionieren gut. Aber CSS gilt nach wie vor nicht zu ng-enter

Answer 1

in Ihrer ui-Ansicht folgende Direktive state-class:

.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); 
     } 
    } 
}]); 

Auf ng-enter, für neu Element erstellt wird es aktuellen Zustand Namen (den Zustand der ui-Ansicht macht den Übergang zu). Für das Element, das verschwinden wird, bleibt der Zustand der gleiche wie zuvor.

Zum Beispiel:

Der Übergang von main zu modal Zustand:

Phase 1: Der main Zustand aktiv ist:

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

Phase 2: Lauf $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> 

Phase 3: Der modal-Status ist aktiv

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