Animations
Workshop (v4+)
Google Developer Expert
Master of Ceremonies
Blogger
International Speaker
Angular Trainer (v4+)
Community Leader
850
900
CSS Introduction
Cascading Style Sheets
- Styling HTML Elements
- CSS rules
- Specificity and order
- Box model
HTML Page life-cycle
source: blog
CSS Rule
SELECTOR
a.active:hover {
color: #333;
}
PROPERTY
VALUE
DECLARATION
pseudo classes/elements
:hover
:link
:active
:target
:not(selector)
:focus
::first-letter
::first-line
::before
::after
::selection
Specificity and Order
-
Element style
-
Element id
-
class/attribute selectors
-
element selectors
-
last CSS rule wins
Box Model
source: blog
Animations
Introduction
- Build on top of Web Animations API
- CSS Transitions
- CSS Animations (@keyframes)
Web Animations API
Background
source: blog
index.html
<html>
<head>
<script src="https://unpkg.com/web-animations-js@2.2.5"></script>
...
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
Angular CLI 1.0
npm install web-animations-js --save
// src/polyfills.ts
import 'web-animations-js';
CSS Transitions
DURATION
START
END
CSS Transitions
CSS Transitions
- Define an initial and final state
- Intermediate states are calculated automatically
- We can choose which CSS properties we want to affect
-
Not all CSS properties are animatable (list)
Animatable CSS
all background* border* bottom box-shadow clip clip-path color filter font* height left margin* mask* offset* opacity outline* padding* perspective* right text-decoration text-shadow top transform vertical-align visibility width z-index
transition
PROPERTY
transition: color 5s ease-in 1s;
DURATION
TIMING
DELAY
timing function/easing
CSS Animations
DURATION
0%
100%
CSS Animations
KEYFRAMES
CSS Animations
- Define any number of states between the initial and final state
- Changes from states are calculated automatically
- We can choose which CSS properties we want to affect
CSS Animation
NAME
animation: fade 5s 1s infinite linear;
DURATION
DELAY
ITERATIONS
TIMING
CSS Animation
@keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
CSS Animation
@keyframes fade {
from { opacity: 1; }
to { opacity: 0; }
}
Angular Animations
fadeIn
fadeOut
States & Transitions
TRANSITIONS
STATE
STATE
fadeIn => fadeOut
fadeOut => fadeIn
fadeIn <=> fadeOut
States & Transitions
void
*
Special Keywords
void => * :enter
* => void :leave
void <=> *
STATE
STATE
Animations Setup
// npm install --save @angular/animations
// app.module.ts
import {Component, NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@Component({ })
export class App { }
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule)
Animation Example
import {fade} from './animations';
@Component({
selector: 'my-app',
template: `<button [@fade]='fade' (click)="toggleFade()">Fade</button>`,
animations: [ fade ]
})
export class App {
fade = 'fadeIn';
toggleFade(){
this.fade = this.fade === 'fadeIn' ? 'fadeOut' : 'fadeIn';
}
}
Animation Example
import {
trigger, transition, state, style, animate
} from '@angular/animations';
export const fade = trigger('fade', [
state('fadeIn', style({ opacity: 1 })),
state('fadeOut', style({ opacity: 0.1 })),
transition('fadeIn <=> fadeOut', animate('2000ms linear'))
]);
Router Transitions
Router transitions
import { Component } from '@angular/core';
import { routerTransition } from './router.animations';
@Component({
selector: 'home',
template: `<h1>Home</h1>`,
animations: [routerTransition()],
host: {'[@routerTransition]': ''}
})
export class Home { }
Router transitions
import {trigger, state, animate, style, transition} from '@angular/animations';
export function routerTransition() {
return slideToRight();
}
function slideToRight() {
return trigger('routerTransition', [
state('void', style({position:'fixed', width:'100%'}) ),
state('*', style({position:'fixed', width:'100%'}) ),
transition(':enter', [
style({transform: 'translateX(-100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
])
]);
}
Performance
Considerations
- Avoid unnecessary layout/repaint
- Use opacity, transform
- Hardware acceleration (avoid)
- transform: translateZ(0)
Saving Resources
.visible.advert {
will-change: transform;
}
.visible.advert:hover {
transform: scale(1.2);
}
Why use Animations?
Benefits
- Improved UX ✨
- Immersive interactions
- Better engagement
- User happiness 😃
Thanks!
Animations Workshop (v4+)
By Gerard Sans
Animations Workshop (v4+)
How we can use Angular to achieve complex Animations. We will cover Web Animations API and how we can use Angular together with field-tested animation techniques providing examples for CSS transitions/animations and SVG. We will also study browser compatibility and performance to achieve reliable and silky smooth animations. Let's bring our Angular skills to the awesome world of animations!
- 4,816