AngularJS animate on children element works 1st time, 2nd fails

Question

I'm having a weird issue here with angular animation. I'm doing an animation that transitions between screens and changes the direction depending on the "depth" of the screen.

There tricky part is that there's two parts, one static and one moving, that's why I'm implementing it like this. You can see that the 1st time works right and the 2nd it doesn't work right. The ng-enter doesn't do the transition well.

Here you can see the plunker:

http://plnkr.co/edit/OC4rqA?p=info

Answer 1

I've played around with this issue and I've got a suspicion that the problem is associated with setting the ltr and rtl classes in $routeChangeStart. It appears that the ngView animation kicks in before the $routeChangeStart class interpolation, so while the animation is in progress already $routeChangeStart changes the classes and all confusion breaks out.

I've got a working example where I moved the ltr and rtl change to inside your controller method $scope.goTo. Ideally you should move this into a separate service. I've also updated your CSS slightly.

.controller('NewCtrl', function ($scope, $location, $rootScope, $route) {
  $scope.goTo = function (route) {
    var next = $route.routes[route];
    $rootScope.viewDirection = 'ltr';
    if ($route.current && next && ($route.current.depth > next.depth)) {
      $rootScope.viewDirection = 'rtl';
    }
    $location.path(route);
  }
});

The demo: http://plnkr.co/edit/oNcOpoXv8lHtYZETpkCe?p=info