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
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?
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.
ng-animate-swap allows us to add
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:
Pretty simple, right?
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.
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.
Do you have an existing Angular 1.x app that makes you worried about its future?
You don’t want your app to be left behind and become legacy code.
But it’s not easy clearing the time to learn Angular 2.
And who has the energy to convince management that you need to change frameworks, delay your schedules and do the Big Ol’ Rewrite?
But what if you could make sure your app keeps its options open?
What if you could make it future-proof, all the while shipping features like a boss?
You’ll work in a codebase that uses the latest and greatest, have easy maintenance and happy stakeholders!
The Future-proof Angular Guide can help you get there.
With this no-fluff course you’ll learn how to quickly adapt your existing Angular 1.x app to the latest components paradigm, as you go about your regular work.
You’ll gradually turn your app into something that is modern and idiomatic, converting directives and getting rid of controllers.
And then, once your app is shaped The Right Way™, you’ll be able to keep shipping like a boss, and have your options open.
Sign up to be notified when the course is ready (and get more of these pragmatic Angular posts in the meantime).