AngularJS中与路由相关的CSS页面过渡

Question

我是AngularJS的新手，并且想实现依赖于路由的页面转换。例如，我希望页面根据路线向左滑动，向右滑动或淡入淡出。

我下面的“ Plunker”通过侦听$
routeChangeSuccess事件，然后将特定于过渡样式的CSS类应用于进入和离开视图来实现此目的（受http://phillippuleo.com/articles/scalable-
approach-page-transitions-
angularjs
）：

http://plnkr.co/edit/ee4CHfb8kZC1WxtDM9wr?p=preview

但是，事件监听器中对$ scope。$ apply（）的调用使AngularJS发出错误消息“ $ digest已经在进行中”。但是，如果我不调用$
scope。$ apply（），则不会更新离开视图的CSS类，并且动画无法正常工作。

这里发生了什么？

Answer 1

我看着你的朋克。问题在于您使用类为视图设置动画的方式。

当$routeChangeSuccess事件触发时，ngView在您有机会改变方向之前已经删除了该类。您可以通过如此快地应用新类来覆盖它，以至于不会引起注意，但是您会收到摘要进行中错误。

我的解决方案（插件）：

我想出了一个指令：

app.directive('animClass',function($route){
  return {
    link: function(scope, elm, attrs){
      var enterClass = $route.current.animate;
      elm.addClass(enterClass);
      scope.$on('$destroy',function(){
        elm.removeClass(enterClass);
        elm.addClass($route.current.animate);
      })
    }
  }
});

animate为每个路线声明一个选项：

app.config(function($routeProvider) {
  $routeProvider.
    when("/page1", {
      templateUrl: "page1.html",
      controller: "Page1Ctrl",
      animate: "slideLeft"
    }).
    when("/page2", {
      templateUrl: "page2.html",
      controller: "Page2Ctrl",
      animate: "slideRight"
    }).
    otherwise({
      redirectTo: "/page1"
    });
});

然后ngView像这样添加它：

<div ng-view ng-controller="ViewCtrl" anim-class class="view"></div>

CSS：

.view {
    width: 100%;
    padding-left: 1em;
    position:absolute;
    top: 0;
    left: 0;
}

.slideLeft.ng-enter, .slideLeft.ng-leave, .slideRight.ng-enter, .slideRight.ng-leave  {
    -webkit-transition:all 1s;
    transition:all 1s;
}

.slideLeft.ng-enter {
    left:100%;
}

.slideLeft.ng-enter.ng-enter-active {
    left:0;
}

.slideLeft.ng-leave.ng-leave-active {
    left:-100%;
}

.slideRight.ng-enter {
    left:-100%;
}

.slideRight.ng-enter.ng-enter-active {
    left:0;
}

.slideRight.ng-leave.ng-leave-active {
    left:100%;
}