Define Two-Way Transitions for Angular States

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