Little touches of animation can make any app feel so much more slick, mature and responsive. Adding animations, though, can be a PITA that involves making your tidy code messier. Add this class, stop that animation, find the right DOM element. Bleh.
ngAnimate can really save you a lot of work and keep your code clean.
But its documentation can be a bit hard to grok.
In this post you’ll see how in just a few lines of CSS you can add nice animations to your
First, make sure that your app has
ngAnimate, since it doesn’t come built-in with the vanilla angular.js file.
That means that you should probably add
angular-animate to your dependencies manager, and make sure to add
'ngAnimate' to your module’s list of dependencies (e.g.
The way ngAnimate works is that it has support for several scenarios which you can then add animations for.
In our examples, we’ll use its support for 2
ng-repeat events: enter and leave.
The enter event is triggered when a new element is being added to collection you are
The leave event, surprisingly, triggers when an element has been removed.
(There are many more cases, like an element whose position changes in the collection, and support for
To use these events with basic CSS animations, you need to handle 2 situations: once the event is starting to happen, and once the event has completed.
For example, let’s think about our enter event. We will make it so that every element that gets added to our list will not just “pop” on screen, but instead will slowly appear by animating its height from 0 to the wanted size (kind of like jQuery’s slide animations).
So, at the triggering of the enter event we will add the CSS property
height: 0, and at the end of the event (called “active” in ngAnimate) we will set the height to its regular size.
Show me the code
Well, there’s actually not any real code, but some HTML and CSS. Yeah, it’s that simple :)
Say our list gets rendered like so:
1 2 3
Notice that every element in the
ng-repeat has the
Lets animate it:
1 2 3 4 5 6 7 8 9 10 11 12 13
As you can see, we set the regular CSS, and then handle the 2 states of the ngAnimate enter event: once it triggers the height is 0, and it slowly grows back to 30px.
The actual animation is done by the browser automatically, because we’ve set the
transition CSS property.
It looks like this:
That’s it, pretty simple right?
I’ll be writing soon about more advanced
You can play with an online example here, which also shows the use of the leave event.
“Maintaining AngularJS feels like Cobol 🤷…”
You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?
It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.
Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.