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

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