Angular js - 幻灯片视图但不是主页 - ng-animate

我在用着ng动画滑动应用程序视图，因此每个路线都会滑动自己的视图，这是我的简单代码：

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

现在，我想知道，is there anyway to exclude the home page (main "/" route) from sliding?

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

就是这样ng-class is for.

每当路径更改时，您都可以设置应用程序范围的变量 $rootScope.path。

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

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

如果你想设置班级slide仅当路径不是/，这样做

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

通过这种方式，您不需要触摸任何控制器。

完整的演示在这里，http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=preview 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;
    }
  });
});

and

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

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