Angular view animation based on source and destination
I am new to Angular animation and I am having trouble navigating to view routes with animation.
I am using ng-route and ng-animate.
Suppose I have three views, page1.html, page2.html and page3.html, which are shown in my index file with ng-view depending on url (/ page1, / page2 and / page 3).
Now if the current url / page1 is displayed (and page1.html is shown), I know how to add CSS classes using ng-enter and ng-leave to make the transitions between pages nice. I am having problems handling different animations in different states.
For example, if I add all the CSS rules to make page1 slide to the left when you leave url / page1 and page2 to the right to the right when entering url / page2, everything is fine. But what if I want the transition between page1 -> page3 to slide up page1 down and page 3 slide down from the top?
This is what I want to have:
- page1 → page2 (slide left effect)
- page2 → page1 (slide effect)
- page1 → page3 (slide effect)
- page3 → page1 (slide effect)
- page2 -> page3 (actual disappearance)
- page3 -> page2 (actual disappearance)
As you can see, my animations depend on the source and destination url / page, not just the page entry or exit. Is there a way to achieve this?
thank
source to share
TL; DR: check out this plunkr. http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv
Using ngRoute theory ...
The way I do it is by adding a state attribute to the body tag. To do this, you need to make $ route available at
angular.module('myapp', [])
.run(function($rootScope, $location){
$rootScope.$route = $location;
})
.controller('MyCtrl', function($rootScope, $location){
$rootScope.previousLocation;
$rootScope.newLocation;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.previousLocation = $location.path();
})
$rootScope.$on('$routeChangeSuccess', function(){
$rootScope.newLocation = $location.path();
})
})
Then in your HTML:
<body ng-controller="MyCtrl" new-location="{{ newLocation }}">
This, however, sucks b * lls as your animation CSS selectors would be something like [new-location*="Books/view"] .ng-enter-active{}
.
Using a higher level ui.router
I would recommend using ui-router
to manage your states to make it a little easier. Since all states are named, you can attach the current state:
angular.module('myapp', [])
.run(function($rootScope, $state){
$rootScope.$state = $state;
})
<body state="{{ $state.current.name }}">
In this case, your CSS selectors for animation will look something like this:
body[state="books.view"] [ui-view].ng-enter{}
Sorry ... this is all a little ridiculous. See plunkr desktop.
... WATCH THIS PLUNKR http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv
source to share