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

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

[00:00] Lastly, with these transitions, right now this goes from void to anything, and if I click toggle again, it's just going to disappear because it's using this transition from anything to anything.

[00:11] It's not going from anything back to void. Can actually use this syntax where the arrows point both ways, and this way it defines from void to anything and from anything to void, so now when I hit save, and I click toggle, and this comes in, after five seconds, I can then hit toggle again.

[00:30] It'll do that same animation. It's not playing it in reverse, it's doing that same animation and then disappearing. So you can define these from go to stop and from stop to go, just like that.

[00:45] So let's also move this one much shorter, and then I'll click toggle to bring it in really fast, and then to stop and then go, and then to stop, and then to go, and then hit toggle again, and it's gone.

[01:04] So make sure you fully understand in these transition definitions what the starting state is, what the ending state is, and if you want it to go from the ending to the starting, to use that two way from state to state, to state from state.

[01:17] You can see right now, if you read these, we don't have an animation defined from anything to stop, so if we go from toggle, and right now there's no state here that we defined. It just ended at an anything, undefined state.

[01:30] So if I click stop, it's just going to immediately jump there, because there is no animation to find from anything. We used to have a from anything to stop, which would animate, but since that's no longer there, just immediately goes there without animation.

[01:45] So make sure you're fully aware of your states and how they go from one to the other, including the any states and the states that don't even exist.

Course

Animate Angular Web Applications

Define Two-Way Transitions for Angular States

Share this video with your friends