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

Question

我正在使用ng-animate来滑动应用程序视图,因此每条路径都会自己滑动视图,这是我的简单代码:

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中排除路线的方法？

Answer 1

这ng-class是为了什么.

每当路径更改时,您都可以设置应用程序范围的变量$ 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

顺便说一句,这使用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