Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Animate
  • Overview
  • Transcript

3.2 ngView

The ngView directive is one of the most important directives. In this lesson I'll teach you how to use its enter and leave animations.

3.2 ngView

ng-iew is another directive that has built in animation support. In fact, the things that we talk about in this lesson apply to not only ng-view but they also apply to ng-include, ng-if, and ng-switch. Now, the things that these directives have in common is that they bring content or elements into the document, or they take content and elements out of the document. Thus, there are two animations. There is enter, which is when those things are brought in. And then there is leave, when those things are taken out of the document. But unlike the ngClass, where we had our own class and then ngAnimate augmented that class with -add and -add-active, and so on and so forth, we have just four classes. There's ng-enter and ng-enter-active and then there's ng-leave and ng-leave-active. Now this follows the same concept that we used in the previous lesson in that the enter and leave classes are where we would set up our transition or our animation and then the active classes are where we actually perform that animation. In this lesson we are going to animate ngView. Let's first of all look at the markup. Here on line 54 we have the ng-view, now I've used the attribute here, but ng-view can also be an element. So that is something that you need to keep in mind. But let's go to the browser and let's look at what happens whenever we go to these different views. Whenever we go to Register or Login, nothing out of the ordinary happens. The content for those views are simply brought into the document. Now we would like some type of animation. Usually for enter and leave, we see opacity type of animations. So that's what we are going to do. Let's go back to our CSS and let's add some inter-animation. Let's do ng-view and then the class, ng-enter but we also need to account for the elements that use the ng-view attribute like I have, and in this case, ng-enter. Now we are fading in our content here. So we're going to set the opacity to 0. And then we are going to transition our opacity. And let's do something like half a second. And then we just need to add the active rules. So let's just copy what we have, we will paste it and add -active to the end of these selectors. And then we need to change the opacity to 1 here, and we don't need our transition. So as far as fading in our content, this is really all that we need to do. So if we go to the browser and refresh, we can automatically see that our content is fading in. Now it's enough to be noticeable, but it's not taking the long time either so this is a rather nice little, subtle animation that adds to our application. And whenever we go to Register or Login we can see that that content is fading in as well. Well, let's try to take this to the next level. Instead of just fading in the content, let's try to fade out the old content as the new content is fading in. So let's go back to our CSS and let's see how we can achieve that. The first thing we need to do is set up the leave animation, which is basically going to be setting the transition property. Well, we are already doing that here in this rule. So let's add the classes for ng-leave here. So ng-view and then ng-leave. Then we need the same thing for when ng-view is an attribute. So let's just copy that and paste it. And then we will change enter to leave. Now we don't want to set opacity here, because we have the leave animation being set up. Whenever we are leaving, we actually want to go from opacity of 1 to opacity of 0, so really opacity of 0 should be set for the ng--eave active class. So let's go ahead and add that. ng-view.ng-leave-active. But we also have to have the beginning point for fading in so we can do ng-view and then ng-enter here. Because this is going to be the beginning point for our fading and the ending point for our fade out. So now we just need the selector for ng-view as an attribute. Let's do ng-leave-active and then ng-view, ng-enter. And then we will simply set opacity to 0 here. And as far as the enter-active is concerned, we will leave that rule alone because enter-active is going to be opacity of 1. So let's go back to the browser. Let's go to Posts, refresh, and we'll see what happens. Now, we saw that Posts fade in, but whenever we click on Register we see that Posts fades out. But Register doesn't overlap. We don't in fact see Register until after the old content fades out. So old content fades out and then new content just kind of pops into place. And as you saw there, there was nothing smooth about that, because Login loaded underneath Register. Then once Register was out of the document, Login popped up to the top. So while the basics are there and things are fading in and fading out, we do need to address this whole positioning thing. And that's easy enough to do. Let's go back to our CSS. We simply need to set ng-view to be absolutely positioned. So let's add another rule here. I guess we would do this in our main CSS file. But since we are making this change now we will just do it here. So we have ng-view. Then we also need ng-view as the attribute. And we will set position to absolute. But we also need to set the width because that's going to change the width of our view. So if we refresh we can see that hello, Posts are way over here now. So, let's go back to the CSS, it will simply say, width is going to be 100%, that should be fine, we will find out. And whenever we refresh, it goes back to how it looked before but now whenever we go to the other views we're going to see that things fade in and fade out at the same time. Now one other thing that we will probably have to address is that notice when Posts loads in we have a scroll bar. And then whenever we go to Register or Login, you can see that it just kinda pops over. The reason being, because once Posts has faded out, we no longer have that scroll bar so the Register, or the Login form has to adjust to that. So, animating ng-view, ng-include, ng-if, and ng-switch is rather simple. We just use the enter and leave animations by taking advantage of the ng-enter and ng-enter-active and ng-leave and ng-leave-active classes. Well, in the next lesson we are going to animate ng-repeat and I bet you won't be surprised that we use the same concepts.

Back to the top