Bringing Angular to Life with Animations
summary
Demo app builds a burger list where clicking the spatula makes an HTTP call and returns a burger with calorie count; CSS transitions and keyframe animations add hover and loading effects by toggling a class via property binding and rxjs tap to flip a loading flag. Use transform and opacity only for performance. Animate removals and router changes with Angular animation triggers, transitions and animate sequences bound to ngIf/ngFor/ngSwitch or the router outlet. Export designer animations as Lottie (Haiku) JSON for cross‑platform use.
AI-written summary · about
chapters (5)
- 0:00Introduction to animations
- 1:15CSS animations and transitions
- 5:22Angular animations framework
- 7:41Lottie animations for web
- 9:42Conclusion and recap
related talks
44mLively Applications with Angular Animations
32mThe Best of ngAnimate in AngularJS
24mMotion Makes Meaning
21mDemystifying Angular Animation
27mElegance of Movement with Reactive Angular Animations
28mAnimations, a tale of three frameworks
25mElegance of Movement with reactive Angular Animations
26mAdvanced Angular Animations