角JS - 幻灯片的意见，但没有主页 - NG-动画 [英] Angular js - slide views but not home page - ng-animate

问题描述

我使用的 NG-动画以滑动的应用程序的意见，所以每条路线的幻灯片自己的观点，这是我简单的code：

i'm using ng-animate to slide the app views, so each route slides own view , this is my simple code:

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

现在，我想知道， 反正是有滑动排除主页（主/路线）

Now, i'm wondering , is there anyway to exclude the home page (main "/" route) from sliding?

在其他方面：？任何方式从NG-动画排除路线

推荐答案

这就是纳克级是

您可以设置应用程序范围的变量$ rootScope.path每当路径的变化。

You can set a application-wide variable $rootScope.path whenever path changes.

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

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

Then, you decide to set your animation class by that variable

如果您要设置类幻灯片仅在路径不是 / ，做这样的

If you want to set class slide only if path is not /, do like this

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

这样做的方式，你不需要接触任何控制器的。

By doing this way, you don't need to touch any of your controller.

完整的示例在这里，<一个href=\"http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=$p$pview\">http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=$p$pview

顺便说一句，这里采用加仑angularJS版本，1.2.7

By the way, this uses currant angularJS version, 1.2.7

-------编辑（访问主页后，动画）------

------- Edit (animate after visit main page) ------

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>

<一个href=\"http://plnkr.co/edit/QpDFkdKH1kk6ZXy07G5X?p=$p$pview\">http://plnkr.co/edit/QpDFkdKH1kk6ZXy07G5X?p=$p$pview

这篇关于角JS - 幻灯片的意见，但没有主页 - NG-动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！