Angular js - slide views but not home page - ng-animate

Question

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?

In other terms: Any way to exclude a route from ng-animate?

Answer 1

That's what ng-class is for.

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.

Full demo is here, http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=preview

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

and

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

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