javascript - Angular js - 幻灯片 View 但不是主页 - ng-animate

Question

我正在使用 ng-animate 来滑动应用 View ，所以每条路线都会滑动自己的 View ，这是我的简单代码:

html:

<div ng-view ng-animate class="slide"></div>

CSS:

/*Animations*/
.slide{
  left:0;
}
.slide.ng-enter{
  transition:0.15s linear all;
  position:fixed;
  z-index:inherit;
  left:-100%;
  height:inherit;
}
.slide.ng-leave{
  transition:0.15s linear all;
  position:fixed;
  z-index:9999;
  right:0;
}
.slide.ng-leave-active{
  transition:0.15s linear all;
  position:fixed;
  right:-100%;
  left:100%;
}
.slide.ng-enter-active{
  transition:0.15s linear all;
  left:0;
  position:relative;
}

现在，我想知道，是否有办法将主页(主要“/”路径)从滑动中排除？

换句话说:有什么方法可以从 ng-animate 中排除路由？

Answer 1

这就是 ng-class 的用途。

只要路径发生变化，您就可以设置一个应用程序范围的变量 $rootScope.path 。

app.run(function ($rootScope, $location) {
  $rootScope.$on("$locationChangeStart", function (event, next, current) {
    $rootScope.path = $location.path();
  });
});

然后，您决定通过该变量设置您的动画类

如果你只想在路径不是/时设置class slide，这样做

<div ng-view ng-class="{slide: path !== '/' }"></div>

通过这种方式，您无需触摸任何 Controller 。

完整演示在这里，http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=preview

顺便说一句，这使用 currant angularJS 版本，1.2.7

-------- 编辑(访问主页后动画)------

app.run(function ($rootScope, $location) {
  $rootScope.$on("$locationChangeStart", function (event, next, current) {
    if (!$location.path().match(/^\/?$/) && !$rootScope.mainVisitedOnce) {
      $rootScope.mainVisitedOnce = true;
    }
  });
});

和

<div ng-view ng-class="{slide: mainVisitedOnce }"></div>

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