Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Define Two-Way Transitions for Angular 2 States

1:53 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Francois D'Agostini

Seems that the plunker demo code is not working anymore ?

In reply to egghead.io
Avatar
Hero

Yup, not working for me either. :(

In reply to Francois D'Agostini
Avatar
Márcio

I think the only thing lacking on this tutorial series is the explanation of animation events to do some side stuff.
https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

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.

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.

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.

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.

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.

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.

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.

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.

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