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

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”.

[00:00] Now it's important to notice when I first refresh, you'll see it ease into the stop state. That it starts from the black square and goes to the stop state over this animation time. That's because we're transitioning from any state to any state, and there's actually a transition from the void, or empty state, to other states.

[00:24] Let's duplicate that. We can say from void, and we'll make this animation longer just so you can see it. Now this will take five seconds. It's going from that black square up to the stop state.

[00:41] I'm just going to define this as zero so that it basically starts at whatever state it's going to and there's no animation there. Or you can also define a void state, so copy this style, and I'll just say our void state is blue, and we can go...we'll make this really long again. Now you'll see it'll start at blue and then go to that stop red.

[01:13] However you want to handle it going from not having a state to having a state, because at this point we are setting the state of signal to stop, because it's defined. If we leave this undefined to start with, you'll see that it just starts at that void state, and then it transitioned back to black.

[01:32] That may have been hard to see, but it went to the default styles. If I remove this and I remove this, and now I hit save, this will just stay black until I go to go or stop or go or stop.

[01:49] Be aware that there is this state where signal is not defined, and it's void and it's going from some state to another state the first time that you set this. If you have transitions covering all states, it's going to hit that void state.

Course

Animate Angular Web Applications

Control Undefined Angular States with void State

Share this video with your friends