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

Already subscribed? Sign In

Autoplay

    AngularJS Architecture: Animate state transitions with ui-router

    Lukas RuebbelkeLukas Ruebbelke

    In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:00 In this lesson, I am going to show you how to animate the state changes in ui-router using ngAnimate. The first thing we need to do is add in the ngAnimate submodule resource because it's not a part of core. We'll just add the JS resource into our index.html.

    00:25 Then we'll hop into our main application file here and add in the ngAnimate submodule. Then we will put our animations in the animations.css file. How this works is we'll define our base animation using this syntax here. We'll go, "ui-view.ng-enter, ui-view.ng-leave."

    01:09 We're going to set position to absolute. We will set left to zero. We'll set right to zero. I'm just going to paste this in because I don't really feel like typing it. We're going to create a transition of all properties for half a second using ease-in-out tweening.

    01:38 Now we've defined the base transition. We need to define an animation or transition from when a ui-view state is initiated to when it is actively applied. Just copy this. We'll go, "ng-enter." We'll start with opacity of zero.

    02:05 Then we'll just copy this. When this state is actively applied or essentially the finished state or completed state of this, we want opacity to be one. What we are going to do now is just copy this. We're going to reverse it.

    02:30 We'll go, "ng-leave." When ng-leave is initiated, we're going to set the property, and then, when it's actively applied, we'll set it to something else. In this case, we want it to go from full opacity to zero opacity.

    02:45 What we've done is we've defined our base transition using this "ui-view.ng-enter, ui-view.ng-leave." Then we've defined the enter and enter active states of opacity zero, opacity one. Then we've done the reverse for ng-leave.

    03:05 Let's hop into the browser and see this in action. Refresh the page. You can see that now things are starting to actually really transition in quite nicely. We were able to do that by just adding the ngAnimate code or submodule into our code and then defining these few simple states using CSS.

    03:33 I love the ng animations. I think it just really gives an application an one-up in terms of the user experience. They're super-easy to add. It just makes it look really nice. Thank you for checking out this lesson. I'll see you next time.

    Discuss

    Discuss