javascript - Angular JS-幻灯片 View 但不显示主页-ng-animate

我正在使用 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;
}

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

换句话说:是否可以从ng-animate中排除路由？

最佳答案

那就是ng-class的目的。

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

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

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

如果仅当path不是slide时才设置/类，请执行以下操作

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

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

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

顺便说一句，这使用的是醋栗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

关于javascript - Angular JS-幻灯片 View 但不显示主页-ng-animate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20869011/