儿童元素的AngularJS动画第一次,第二次失败

时间:2014-03-15 23:09:12

标签: javascript angularjs angularjs-animation

我在角色动画方面遇到了一个奇怪的问题。我正在做一个在屏幕之间转换的动画,并根据"深度"改变方向。屏幕。

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

在这里你可以看到plunker:

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

1 个答案:

答案 0 :(得分:3)

我已经解决了这个问题,我怀疑问题与设置ltr中的rtl$routeChangeStart类有关。似乎ngView动画在$routeChangeStart类插值之前启动,所以当动画正在进行时$routeChangeStart已经改变了类,并且所有混乱都会突然出现。

我有一个工作示例,我将ltrrtl更改移动到控制器方法$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