Lively Applications with Angular Animations
summary
Shows how to build concrete UI behaviours in Angular using Angular Animation triggers and the animation DSL (states, styles, transitions, params): examples include a time-tracking app with a sliding burger menu, content-push animations, list entrances using query+stagger, and router transitions that animate outgoing views before DOM removal. Explains when to use CSS vs JS vs Angular animations and notes user-perception timing (under 100–200 ms feels instant, over 10 s feels lost); demonstrates that :enter/:leave transitions allow Angular to delay DOM removal until animations complete.
AI-written summary · about
chapters (8)
- 0:00Animation motivation
- 8:10CSS vs JavaScript
- 12:45Angular Animations
- 20:14Angular Animations example
- 27:40Menu transitions
- 30:31Advanced Angular Animations
- 33:21List animations query/stagger
- 40:12Summary
related talks
13mBringing Angular to Life with Animations
26mAdvanced Angular Animations
45mImplementing Motion using Angular
32mThe Best of ngAnimate in AngularJS
21mDemystifying Angular Animation
24mMotion Makes Meaning
27mElegance of Movement with Reactive Angular Animations
38mNext Level UI Building Blocks With Angular2