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?
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>