Animate Angular 2 Web Applications

15 minutes

Angular 2 comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, styles, and animations. This course walks you through each of the animation features so you can start building out your own Angular 2 animations.

pro-course-rss-logo

PRO RSS Feed

Define an Angular 2 Trigger and State

Switch Between Angular 2 States on a Trigger

Animate Between Angular 2 States Using Transitions

Control Undefined Angular 2 States with void State

Animate Adding and Removing Angular 2 Elements with ngIf

Delay and Ease Angular 2 Animations

Use Keyframes for Fine-Tuned Angular 2 Animations

Define Two-Way Transitions for Angular 2 States

angular2 tutorial about Define an Angular 2 Trigger and State

Define an Angular 2 Trigger and State

1:32 angular2

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

angular2 tutorial about Switch Between Angular 2 States on a Trigger

Switch Between Angular 2 States on a Trigger

1:04 angular2

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

angular2 tutorial about Animate Between Angular 2 States Using Transitions

Animate Between Angular 2 States Using Transitions

1:11 angular2

The foundation of animation in Angular 2 is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.

angular2 tutorial about Control Undefined Angular 2 States with void State

Control Undefined Angular 2 States with void State

2:05 angular2

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

angular2 tutorial about Animate Adding and Removing Angular 2 Elements with ngIf

Animate Adding and Removing Angular 2 Elements with ngIf

1:49 angular2

A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

angular2 tutorial about Delay and Ease Angular 2 Animations

Delay and Ease Angular 2 Animations

3:11 angular2

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

angular2 tutorial about Use Keyframes for Fine-Tuned Angular 2 Animations

Use Keyframes for Fine-Tuned Angular 2 Animations

2:15 angular2

When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular 2 animation you want.

angular2 tutorial about Define Two-Way Transitions for Angular 2 States

Define Two-Way Transitions for Angular 2 States

1:53 angular2

You often want to re-use a transition when going between the same two states. Angular 2 transition syntax allows you to define how the transition should be applied between states: one-way or two-way.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?