AngularJS的animate on children元素第一次成功，第二次失败

Question

我在这里有一个奇怪的问题与角动画。我正在做一个动画，它在屏幕之间转换，并根据屏幕的"深度"改变方向。

棘手的部分是有两个部分，一个是静态的，一个是移动的，这就是为什么我这样实现它。你可以看到，第一次工作正常，第二次工作不正常。ng-enter不能很好地完成转换。

在这里你可以看到柱塞:

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

Answer 1

我已经玩过这个问题，我怀疑这个问题与在$routeChangeStart中设置ltr和rtl类有关。看起来ngView动画在$routeChangeStart类插值之前就开始了，所以当动画正在进行时，$routeChangeStart已经改变了类，所有的混乱都爆发了。

我有一个工作的例子，我把ltr和rtl的变化到你的控制器方法$scope.goTo。理想情况下，您应该将其移动到单独的服务中。我还稍微更新了你的CSS。

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

演示:http://plnkr.co/edit/oNcOpoXv8lHtYZETpkCe?p=info