Animations (v.20+)

Some experiments with the new Angular Animation System

2 snippets

6 mins

v.20.2

Fabio Biondi

Google Expert | Angular

Work in Progress

I'm still working on this section that will contain several examples of the new animation system in Angular v.20+.

Furthermore some examples include features not described in this book, like @defer and it might be a little complex for beginners

# New Animations system & @defer block

1. use @defer to instantiate items when visible in the viewport
2. the instantiated components, panel, has an "animate.enter" animation that is applied when mount

Another benefit of @defer

Using @defer gives us an added benefit, which is to lighten the initial bundle and load the component chunk only when it actually appears the first time.

In the following animation you can see from Chrome's DevTools Networks how the chunk (the last one in the list) is loaded only when the item is displayed

SNIPPET 1/2

src/app.ts

SNIPPET 2/2

src/panel.ts

# Stagger & @for block: animate items

1. animate element by element when creating the list
2. apply an exit animation when an item is deleted

Interactive Demo

• Click an item to remove it
• Reload: populate array with initial data

src/app.ts