Define an Angular Trigger and State

Switch Between Angular States on a Trigger

Animate Between Angular States Using Transitions

Control Undefined Angular States with void State

Animate Adding and Removing Angular Elements with ngIf

Delay and Ease Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

Define Two-Way Transitions for Angular States

Animate Angular Web Applications

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.

[00:00] Let's start just by creating a black square. We'll call this a traffic light. I'll give it a class of traffic light.

[00:07] We'll style it up using some styles, and we'll say traffic light as a width of 100, a height of 100, and a background color of black. Really fancy.

[00:21] Now we'll see a nice black square over here, and to make this animate, this needs to have what's called a trigger. We're going to call this trigger signal.

[00:32] You can name it whatever you want as long as it has the @ sign in front of it that makes it a trigger, and there's always the square brackets around an attribute make it an expression that'll evaluate on the right hand side.

[00:43] I'm just going to make this a string of go. You can read this as a trigger of signal inciting to a state of go. You define those in here in animations, where you define a trigger, and always make sure to import these, so you'll see I automatically imported it there.

[01:00] A trigger signal with an array of states. Make sure to import state, and the state we're defining is go. Then states have styles. Make sure to import style, and styles are just basic CSS objects, so background color green.

[01:16] We have this trigger called signal on a state of go. It's telling it to set the background color to green, and because our signal here is set to go, the state of go, when I hit save, we should see the background color turn green.

Course

Animate Angular Web Applications

Define an Angular Trigger and State

Share this video with your friends