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

3.3 ngRepeat

ngRepeat is another commonly used directive. In this lesson, you'll learn how it can be animated.

3.3 ngRepeat

Animating ng-repeat is very similar to everything that we've looked at thus far. In fact, it's almost identical to what we saw in the previous lesson, because ng-repeat uses the inter and leave animations whenever it adds or removes elements to and from the document. So let's first of all look at the mark up where I use ng-repeat. There is the directive right there, and this is where I am displaying all of the posts. You can see that this is a div element and it has a class of posts. So we're going to use this class in order to set up the enter and leave animations. Let me first of all add a little section for ngRepeat, and then we will add the classes for setting up the enter and leave animation. We want to use posts and then ng-enter and posts.ng-leave. And we will use the same transition here, which we are only going to transition opacity, although we might add a couple of other properties here eventually. Now we can do a variety of different things here. In fact you will find that many developers choose more gaudy type of animation. The items in an ng-repeat will fly into place or they'll do some acrobatics. I personally like subtle and simple animation because as a user, I just like to get to the content, and all of the other stuff is just distracting. So, we're going to use an opacity transition, and let's make this fairly quick with three tenths of a second. So, now let's set up the ng-enter and the ng-leave active. So that this is going to be an opacity value of zero. So that .posts.ng-enter and then posts.ng-leave-active and we will set opacity to zero. And then we just need to set up the ng-enter-active. So .posts.ng-enter-active and here we will have opacity set to one. Well, let's see what this looks like. Now, when the posts first load, we're not going to notice much difference here and the reason is two fold. First is that we're using opacity transitions both for ng-view and for ng-repeat. So we're not going to notice much difference there. But there's also something else going on behind the scenes which we will get to in a few moments. Let's first of all use our search feature here. And let's filter our posts. Let's do a search for F and we will see what happens. Now the second and the third messages are gone, you could see that they faded out but then this fourth message just popped into place. And if we remove the F from the search box, these items are going to fade in, but once again they just kinda popped into place as well. Let's look at that one more time. I'm typing F, they fade out and fourth message pops into place and whenever I remove the F, everything fades in but once again it pops into place. So we could make this smoother by adjusting the margins of these elements. When the leave animation executes we could set the margin bottom to a negative value, equal to roughly the size of one of these posts, plus the HR element. So let's inspect one of these. Let's just do the first message and we will see what its dimensions are. This is 148 pixels tall. Although, let's look and see what we have as far as margin and border, we don't have anything that is 148, so that's good. Let's look at the horizontal line. Now, it says that that is 2 pixels high but there's a lot of margin there, so let's see what that is. Let's see, we have 40 on top, 40 on bottom so that's 80 total. Well, let's just take the bottom into account, so we will take 40 plus whatever the size of the post is, that was 148. So we will set the margin to negative 188 for the leave active class. So margin, bottom, and minus 188 pixels. Now we do need to transition this because we want it to slide up. So let's just change opacity to all for our transition. We might need to tweak that, because I'm not sure if this is actually going to look good or not. So let's refresh and let's see what happens. Let's do a search for F. And that is much better. You could see that the fourth message slid up into place. But I'm not sure if the timing is what I want it to be. Now whenever we remove the F from the search box, of course things are still choppy because we haven't done anything for the enter animation. But lets do a search for F once again, I might set the margin transition to be a little bit longer because I would think that's the opacity transition should finish before the margin finishes. So let's go to back to our CSS. And we will change our transition from all back to opacity at three-tenths of a second. And then let's also do margin bottom and we will say that, that will be, let's do half a second.. And then let's also set a margin bottom value for the enter-active. So margin-bottom, and let's just pick something, I'm gonna do 15 pixels. If that doesn't look good then we will just adjust it from there. So let's refresh. Let's do a search for F, and that is much better, I think. The opacity transition finishes before the margin bottom, so it doesn't look like that the fourth message is overlapping anything. It looks like that it is taking up the space that was formerly held by those other posts. So, whenever we remove the F, we should see a similar transition, and we do. Things just kind of expanded and slid down. So I'm happy with that. We might could play around with that a little bit more, but that's going to be fine. Now, there's one other thing, whenever I refresh the page, or whenever we look at the posts from some other page, we should see that same animation. And we don't because angular is giving precedence to ng-view, so whenever you have a container that has animation which is ng-view in this case, and the container's children also has animation which would be ng-repeat, angular gives precedence to the container. Now we can override that behavior by using a directive called ng-animate-children and of course, we put this on the container. But with this directive, angular is going to animate both the children and the container as well. So now we see the transition for margin bottom whenever we look at our posts. Now I personally don't like that, I just want the simple opacity animation to occur. So I'm going to remove ng-animate-children, but feel free to add that if you want to. Now there's one other thing that we can do here. We can stagger the animation for each item in ng-repeat. I'm just going to paste this in. We have two classes, we have ng-enter-stagger, and ng-leave-stagger, where we set the transition-delay, which I have set to two-tenths of a second and then it's usually best practice to set transition duration to zero. So now, let's go back to the browser and we will refresh, let's do a search for F, and we see that the animation staggered for each of those posts. And, if we remove the F, the transition is going to stagger once again. I personally don't like that here either, so I'm just going to comment that out. But I will leave that here in the code so that you can play with that if you want to. I just like simple quick animations. So animating ng-repeat was very similar to ng-view, ng-include and so on. In the next lesson we are going to animate ng-show and ng-hide.

Back to the top