7. About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer
8. Agenda
• Web animation
• Building our own Angular animation implementation
• Angular animation in a nutshell
9. Web Animation Options
• Use JavaScript animation library
• Use CSS3 modules
• CSS3 Animations
• CSS3 2D and 3D Transform
• CSS3 Transitions
11. Web Animation API
• Enables you to hook into the browser’s animation engine
• Implemented on top of CSS3 animation and transitions
• Enables the ability to change animations during runtime
12. Web Animation API in a Nutshell
• Use the new animate function
• Pass Keyframes array and AnimationEffectTimingProperties object
document.getElementById("myPic").animate(
[
{transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000'},
{transform: 'translate3D(10%, 10%, 0)', backgroundColor: '#ff0000'},
{ transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);
19. @angular/animations
• Based on Web Animation API
• Animations are separated from Angular core
• Totally refactored
• Fully dynamic
20. Angular Animation Module Setup
• Import the BrowserAnimationsModule to your ngModule
import {BrowserAnimationsModule} from "@angular/platform-
browser/animations";
@NgModule({imports: [BrowserAnimationsModule]})
21. How to Use Animation?
• Create animation trigger in the component template
• Describe the trigger in the component decorator
<div [@fade]="active ? 'in' : 'out'">hello there</div>
import {trigger, ...} from '@angular/animatons';
@Component({
animations: [trigger('fade', [ /*...*/ ])]
})
22. How to Use Animation? – Cont.
• In the trigger you set
• Transitions
• States
trigger('fadeIn', [
transition('out => in', [ style({ opacity: 0 }),
animate(1000, style({ opacity: 1 })) ])
])
24. States and Transitions
• Named states define styling of an element in state
• Transitions defines what happens when we move from one state to
another (use =>)
state('state name', style({…}))
transition('* => in', [ style({…}), animate(1000, style({…})) ])
25. Working with keyframes
• keyframes enables the creation of intricate animation
• Defined using the keyframes function and keyframe array
transition('void => *', [
animate(300, keyframes([
style({…, offset: 0}),
style({…, offset: 0.4}),
style({…, offset: 1.0})
]))
])
26. Animation Groups
• Run animations in parallel using grouping
• Use the group function
transition('void => *', [
style({…}),
group([
animate('0.3s 0.1s ease', style({…})),
animate('0.3s ease', style({…}))
])
])
27. Animation Callbacks
• You can wire to animation start and end callbacks
• Use the trigger start and done handlers
<li *ngFor="…"
(@fade.start)="animationStarted($event)"
(@fade.done)="animationDone($event)"
[@fade]="'in'">
…
</li>