Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Define Two-Way Transitions for Angular States

    2 - ~8.1.1

    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.