Next Level UI Building Blocks With Angular2
summary
Shows concrete Angular2 features: a component-scoped animation DSL compiled ahead to fast JS with ahead-of-time compilation, uses the Web Animations API (polyfill for non-supporting browsers), and exposes a player with play pause reverse API and animation events. Demos include dossier components, list enter/leave staggering, smooth image-loading with callbacks, an expand/collapse slider, a modal with queried subelement choreography, and a flexbox-like layout implementation — all built and demonstrated working in the live demos.
AI-written summary · about
chapters (16)
- 0:00Start
- 1:47Angular Building Blocks...
- 10:56Sample: Angular Component
- 13:56Animatons in Angular 2
- 15:34Web-Animations API
- 16:05Web Animations are strict
- 18:58Sample: Open Close Component
- 19:16Sample: Template Bindings
- 19:36Sample: Animation Definition
- 20:39Hooking into Animation Events
- 23:12Sample: Animation DSL
- 24:55animation timing
- 27:11Framework Knowledge
- 32:19Sample: CSS Referencing
- 34:14The expr() method
- 34:37Sample: Animation Expressions
related talks
18mYet another way to animate in Angular
27mElegance of Movement with Reactive Angular Animations
44mLively Applications with Angular Animations
21mDemystifying Angular Animation
17mAnimations in Angular 4.0.0
28mAnimations, a tale of three frameworks
26mAnimations (sequencer, web animations)
24mMotion Makes Meaning