Animating or transitioning view changes in AngularJS
Since AngularJS 1.2.0 we've had the ability to do native animations in Angular using CSS classes, transitions and keyframes. I've been working on a site recently where it called for transitions to be used between view changes heavily. Thankfully this is made really easy using the ngAnimate
module.
Prerequisites
If you haven't already, go and fetch the ngAnimate
module that matches your version of AngularJS from angularjs.org and pop this into your module's dependency list.
ngAnimate
We can set a global transition for all pages or set them per view which I think is much more interesting. This just requires us to change a class on our ng-view
element.
The easiest way of doing this is to just assign a CSS class to a model on our controller. We can then pull this out on the ng-view
element in our HTML.
$scope.viewClass = 'animate-home';
Then we just display this in the usual fashion.
<div ng-view class="{{viewClass}}></div>
As we've included the ngAnimate
module, when our view changes Angular will automatically add/remove classes from the entering and exiting views.
With ng-view
these classes are .ng-enter
and .ng-leave
.
Animating with CSS
The .ng-leave
class will be called on the exiting view. We can globally reference it to call a specific animation on every view.
.ng-leave{
top: 0;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: downfromtop;
animation-name: downfromtop;
}
@-webkit-keyframes downfromtop {
0%{
top: 0;
}
100% {
top: 100%;
}
}
@keyframes downfromtop {
0%{
top: 0;
}
100% {
top: 100%;
}
}
This will slide the view we're navigating away from down. Let's do the reverse and bring the entering view up from the bottom as well.
.ng-enter{
top: 0;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: upfrombottom;
animation-name: upfrombottom;
}
@-webkit-keyframes upfrombottom {
0%{
top: 100%;
}
100% {
top: 0;
}
}
@keyframes upfrombottom {
0%{
top: 100%;
}
100% {
top: 0;
}
}
"But what if I want to have a different transition for each view?"
Thanks to the fact these are just CSS class we can utilise that one we setup in our view's controller. We simply just need to change our CSS delaration to include it.
.animate-home.ng-leave{
/*...*/
}
And that's it! You can add as many transitions as you'd like by just adding the CSS class name to your controller.
Remember, transitions don't work on inline elements so if you're using
ng-view
as an element and not an attribute, be sure to set it todisplay: block;
The ngAnimate
module can also be used for a bunch of other cool things like animating ng-repeat
additions/deletions or animating the hiding/showing of elements.
If you haven't yet, be sure to check the documentation for the module.