Slide 1
Slide 1 text
www.thomasgassmann.net/
@gassmannT
Angular Animations – Und plötzlich ist meine App so
richtig sexy!
BASTA 2020
Thomas Gassmann
Slide 2
Slide 2 text
Agenda
• Introduction
• Structure of an animation
• Animate various elements
• Reusable animations.
Slide 3
Slide 3 text
Thomas Gassmann
Principal Consultant,
Trainer, Speaker
[email protected]
thomasgassmann.net
@gassmannT
Slide 4
Slide 4 text
Creating Animations
CSS Javascript
Slide 5
Slide 5 text
CSS Animations
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
CSS Animation
• Limited control
• Good for simple animations like showing a tooltip or toggeling an UI
element
• Not recommended for fine-tuned control.
Slide 8
Slide 8 text
Javascript Animation
• jQuery
• GSAP
• Zepto
• Web Animations API (WAAPI).
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Angular Animations
@angular/animations
WAAPI
Slide 12
Slide 12 text
Structure of an animation
Slide 13
Slide 13 text
@angular/animations Module
• trigger()
• transition()
• state()
• animate()
• stagger()
• etc.
Slide 14
Slide 14 text
Angular Animations
State 1 State 2
Transition
background-color: blue background-color: red
Slide 15
Slide 15 text
States
void Wildcard (*) Custom
Slide 16
Slide 16 text
Void State
• Not part of the DOM
• Element is entering the page
• Element is leaving the page
Add an Item: void => *
Delete an Item: * => void
Slide 17
Slide 17 text
Wildcard State
• Matches any animation state
• Implemented with an asterix (*)
• Useful for defining transitions regardless of the element’s start or end
state
Slide 18
Slide 18 text
Custom State - Example
accordion collapsed
expanded
Slide 19
Slide 19 text
Custom State - Example
Slide 20
Slide 20 text
Custom State - Example
Slide 21
Slide 21 text
Custom State - Example
Slide 22
Slide 22 text
Custom State - Example
Slide 23
Slide 23 text
Demo
Slide 24
Slide 24 text
More complex scenarios
Slide 25
Slide 25 text
Animate multiple elements
• query() finds one or more inner HTML elements
• stagger() applies a cascading delay to animations for multiple elements
• group() runs multiple animation steps in parallel.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Animate Builder
• Animations can also be constructed/sequenced within a component
(instead of just the metadata)
• By injecting AnimationBuilder into your component
• And then building an animation player.
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Demo
Slide 31
Slide 31 text
Router Animations
Slide 32
Slide 32 text
Routing
• Animating routes in Angular is much the same as querying for elements
and animating them
• First, setup a @routerAnimations trigger
Slide 33
Slide 33 text
Routing
• Routes can be defined with animation details
Slide 34
Slide 34 text
Routing
Slide 35
Slide 35 text
Demo
Slide 36
Slide 36 text
Reusable Components
Slide 37
Slide 37 text
Reusable Animations
Slide 38
Slide 38 text
Reusable Animations
• animation() function: Produces a reusable animation that can be invoked
from elsewhere. Used together with useAnimation().
• useAnimation() function: Starts a reusable animation that is created
using the animation() function.
Slide 39
Slide 39 text
Reusable Animations
Slide 40
Slide 40 text
Reusable Animations - useAnimation
Slide 41
Slide 41 text
Reusable Animations - animate
Slide 42
Slide 42 text
Demo
Slide 43
Slide 43 text
Recap
• CSS Animations are good for simple animations
• @angular/animations is a powerful framework
• Animations can help to increase user experience
• However, use animations carefully
• Otherwise…
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Thank you!
Thomas Gassmann
www.thomasgassmann.net
@gassmannT
[email protected]
Slide 46
Slide 46 text
Weitere Informationen
• github.com/gassmannT/ngAnimation
• thomasgassmann.net
• swissangular.com
• trivadis-training.com/de/training/kurse-nach-markttrends/web-
development
• angular-academy.ch
Slide 47
Slide 47 text
No content