In my previous post, which is a short introduction to ngAnimate, we saw how just including ngAnimate in a project and a dozen lines of CSS can add slick animations to ng-repeat
easily.
That was a very simple use-case, and in this post I want to show you how you can use it to animate transitions inside any container you have, with about the same complexity!
Our example, simple pagination
Say we have a regular component that displays a list. It has basic pagination – we only display a fragment of the list and there’s a “next” button to move on to the next fragment.
Our animation-less component would look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Now if you’re following along you can see that this is basically Angular 101. A simple component with a list of pages, and our template just displays that list with a little button to advance pages. Nothing fancy.
At this point we are sans-animation. Pressing the “next” button would instantly swap the contents of the page.
Not the best UX in the world, right?
Introducing ng-animate-swap
ng-animate-swap
is a nifty little directive that’s part of ngAnimate
(full docs here).
What it does is… well… animate when you swap things!
Where in the previous post we saw how ngAnimate
adds events to a set of situations it knows (e.g. leave
, enter
and move
for ng-repeat
), ng-animate-swap
allows us to add leave
and enter
events to any DOM element!
You do it by passing ng-animate-swap
an expression to watch for.
Whenever that expression changes, it will trigger the animation to swap the container from the previous state to the new one.
In our case, we would like to swap the element with the page
class, so it will animate whenever you move between pages.
The line we change in the template, after the changes, looks like this:
1
|
|
Pretty simple, right?
We tell ng-animate-swap
to listen for page changes.
Now, with a dozen or so lines of CSS we’ll add a basic animation and, voila, here’s your slick animation:
I won’t go into the CSS in this post, but you can see if for yourself, along with a live example, here.
With basically no JavaScript changes and very minimal template changes, ngAnimate
gives us a lot of power to add animations to our apps.
Keep that in mind the next time you need to spice a screen up a little.
“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.