AngularJS Architecture: Animate state transitions with ui-router
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.
[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.