Two different animations for route changes

Question

I have the following case: I\'m using the ui-router for the routing in my AngularJS application. In one route, there are five child states for different subscreens. I want t

Answer 1

Eddiec's solution was a really nice start but I still found myself hacking it up a bit. Here is a modified controller that works better for my purposes. This is more dynamic:

function ViewCtrl($scope, $state) {

   $scope.$on('$stateChangeStart', function (event, toState) {
        var movingToParent = $state.includes(toState.name);
        if (movingToParent) {
            $scope.back = true; 
        } else {
            $scope.back = false; 
        }
    });


}

Answer 2

I was attempting to do this same thing with ngRoute using $routeChangeSuccess but the problem I ran into was that the ng-leave animation would start before a digest cycle ran. The enter animation was always correct, but the leave animation was always the previous one.

The solution that worked for me (Angular 1.57) was to wrap the $location.path() call in a $timeout. This makes sure a full digest runs before the animation is started.

function goto(path) {
    if(nextIndex > currentIndex) {
      ctrl.transition = 'slide-out-left';
    } else {
      ctrl.transition = 'slide-out-right';
    }
    $timeout(function() {
      $location.path(path);
    });
  }

Answer 3

You could always checkout the angular-1.2 branch: https://github.com/angular-ui/ui-router/tree/angular-1.2. This fixes up ngAnimate along with a few other things.

I believe this will be included in ui-router 0.3.0, so as long as you won't be pushing live soon, this should provide you with the function you need until you can get back on the 'stable' branch.

Disclaimer: I have no authority on when the next release of UI-router will be or what it will include. I have simply found this information in various issues on the github page.

Answer 4

You can control the classes on your view by setting up a controller to do that specifically. You can then subscribe to events within the app and change the way the page animates.

<div class="viewWrap" ng-controller="viewCtrl">
  <div class="container" ui-view ng-class="{back: back}"></div>
</div>

Then within your controller

.controller('viewCtrl', function ($scope) {
    $scope.$on('$stateChangeSuccess', function (event, toState) {
        if (toState.name === 'state1') {
            $scope.back = true; 
        } else {
            $scope.back = false; 
        }
    });
});

I've set up a codepen to demonstrate here http://codepen.io/ed_conolly/pen/aubKf

For anybody trying to do this please note that I've had to use the ui.router.compat module due to the current incompatibility of the animations in Angular 1.2 and UI Router.

Answer 5

Similar attempt to @eddiec's accepted answer. Basically an array of the state name values and then the position in the array of the names of the toState and fromState values are compared to determine the direction.

.controller('viewCtrl', function ($scope) { 
    $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {

        // create an array of state names, in the order they will appear
        var states = ['state1', 'state2', 'state3'];

        if (states.indexOf(toState.name) < states.indexOf(fromState.name)) {
          $scope.back = true; 
        } 
        else {
         $scope.back = false;  
        }
    });
});

Codepen, forked from above, showing the working result. http://codepen.io/anon/pen/zBQERW