AngularJS中与路径相关的CSS页面转换

当触发$routeChangesuccess事件时,ngView已经删除了该类,然后才有机会改变方向.你可以通过快速应用新类来覆盖它,这样就不会注意到它,但是你会得到正在进行的摘要错误.

我的解决方案(plunker)：

我提出了一个指令：

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%;
}