For a detailed view of all the animation functions that angular provide I would recommand this great article of Year Of Moo. In this article we’ll focus on some limits and how to workaround.
Let’s build a simple fading animation on a list of movies :
In this case the animation will apply only on the
ul element. Here is how you can apply this animation on each element with delay between each
li (stagger) :
Ok, it looks cool. But as a developer I want to be able to reuse my animations. For that I’ll create an AnimationReferenceMetadata and use it for this transition:
Great ! But, now I need to customize the properties of my animation depending on the component I’m on. No problem :
Ok, ok, but I don’t always want to apply this animation on
li elements. Why not use a params for that ?
Unfortunately, Angular Animation doesn’t support params for
stagger value :