Apply a state class to ui-view to allow different ng animation

Question

I need to apply different animations depending on the current state using ui-view. Following on from this question..

I have the following code (edit: see plunker preview)

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

stateClass gets applied in each controller e.g:

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

This works and the class gets added fine - but the animation wont kick in.

If I was to update the ui-view code to:

<section ui-view class="slide-left"></section>

with the class hardcoded, this works (but now I can't apply different animations).

Does ng-class get added after ng-enter? Can someone suggest how to achieve the animations?

edit>> Oddly enough ng-leave animations work fine. But css still doesn't apply to ng-enter

Answer 1

Add to your ui-view following directive 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);
        }
    }
}]);

On ng-enter, for newly created element it will add current state name (the state the ui-view makes the transition to). For the element that is going to disappear the state remains the same as it was created before.

For example:

The transition from main to modal state:

Phase 1: The main state is active:

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

Phase 2: Run $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: The modal state is active

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