3

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

fernandopasik
  • 9,565
  • 7
  • 48
  • 55
  • The problem is as Beyers said in his answer, the ngView animation kicks before the $routeChangeStart, so what I need then is another way to kick that direction in the right place so it works always, as a service or directive. – fernandopasik Apr 03 '14 at 16:41

1 Answers1

3

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

Beyers
  • 8,968
  • 43
  • 56