3.6 Animation Anchoring
New to Angular 1.4, this feature allows you to cross-animate elements between views. It's a cool effect if used appropriately. In this lesson I'll show you how.
1.Introduction1 lesson, 01:03
2.Getting Started3 lessons, 23:16
3.Directives With Built-in Animation Support6 lessons, 45:18
5.Conclusions1 lesson, 00:30
3.6 Animation Anchoring
Angular 1.4 introduces a new feature called Animation Anchoring. It allows us to cross-animate elements between different views, and this can be useful when you want to visually demonstrate that part of one view is related to part of another view. However, I don't see this as being a feature that we will use in most applications. It has a few specific uses, but I think 95% of the time, we probably won't be using this feature. Now, I've had to make some modifications to Sound Board in order to get this new feature working. Because there's not a whole lot of information on animation anchoring. Of course there's a small little blurb on the angular docks, and they have a very simple demonstration. But as far as the Internet as a whole, there's not a whole lot of information up there. So, if you cannot get animation anchoring to work in your applications, it's probably going to take some trial and error. Well let's start by going over the changes that I had made to Sound Board. First, I added a new view, so that we can see an individual message. So, if we click on one of these titles, it's going to take us to a view that simply shows that one message. So, here we saw the second message. We can go back. We can click on the third message, and then we will see only the third message. So we have a new view. It's called post. We have a new controller for that view called post controller. And they are very simple. If we look at the views, all we are going to see is simply the code for displaying an individual post. It's almost identical to what we have inside of home except that there's no title, there's no search, and of course, there's no ngRepeat, because we are just displaying and individual post. Now in order to make animation anchoring work, I had to change the posts service. So if we look at that, there's still this getPosts method, but now it simply returns the array of items. And there's no deferring or anything like that. It is simply returning that data. And that means I needed to modify the home controller so that it would now just retrieve those posts. So there we have that. Modified code. If we look at PostController, we have somewhat of the same thing. We get the ID from routeParams. We get our posts data, and then we retrieve the appropriate post. And then finally, I had to add a class to the ngView directive. So, where I have this div element for ngView, I also had to add a class. And it doesn't really matter what that class is called, just as long as there's a class there. So I just called it view. Now in order to get anchoring to work, you have to first set up animation for your views. Now we don't have to worry about that because we already did that a few lessons ago. We have both enter and leave animations. So the next thing we need to do is decide what elements we want to anchor. That is, we need to set up a relationship between the home and the post view. And we do so by choosing the element that we essentially want to animate between those views. And we're gonna start with the h3 element because that's kind of what this particular type of feature is for. You just pick one piece of a larger part, and you animate that to show the relationship between one view to another. So, in the h3 element, we're going to add an attribute called, ng-animate-ref. We're setting up a reference, between one element to another. And the value of this attribute has to match between the two views. So we have an ID for our post and that is a perfect thing to use as our reference value, so we're going to use the post ID for ng-animate-ref. We're going to copy this attribute and paste that on the h3 element in our post view. And as far as our markup, we're done. That's the only that thing we need to do. So we can go to animate CSS, and we can add the necessary classes for making this particular feature work. There are three of them, but only one is required. It's called ng-anchor. And we set up the animation that we want to perform for our anchor as it is animating across the views. So in this case we're just going to use a transition, we're going to transition all properties. And I'm going to use a duration of half a second. Now the other two are for when the anchor element animates out of a view and into the next view. So, that is called ng-anchor-out and then we have ng-anchor-in. Now for ng-anchor-out, let's do a background of red. That way we can see that actually occurring. And then for the other, which I'll just copy and paste, we'll change that to ng-anchor-in, let's use a background of yellow. So, ng-anchor-out is used whenever the anchor is animating out of the current view, and then ng-anchor-in occurs when that anchor is animating in the new view. So, if we go back to the browser we can refresh. Let's just click on second message, and we are going to see that transition. We see that it slides up into place. We also saw that the background colors changed as well. If we go back to posts, we're going to see the reverse animation. But the colors are occurring in the same order. It goes from red to yellow, so the out takes place first, and then the in. And we will see this same type of transition regardless of what title we click on. So third message is going to slide up into place, and then whenever we go back it's going to slide down into place. So, this type of animation would be really cool in a photo gallery. But for our purposes, I don't really like that. It seems disjointed and it just doesn't look good. And of course, I'm not talking about just the background colors, cuz those definitely don't look good, but the animation itself doesn't. I don't like just moving the h3 element. So instead, we're going to change where we have set this ng-animate-ref attribute. Instead of the h3 element, let's put it on the div element with a class of post. And let's see what that looks like. Although, no, let's do the one with posts. And that might not work, we will just have to find out and see. So we will remove ng-animate-ref from h3 and use it on posts. So, let's go back to the browser. Let's refresh, and hopefully we should see the entire message animate, and yes we did, but let's get rid of that background color because that's just useless in our case. So I'm going to comment this out. Just so that you can see that in the code download, we'll go back to the browser. Let's refresh, and now we will just see that entire message animate up. And in this case, I think that that would be a good use. It doesn't seem disjointed, and it adds just a little bit of pizzazz. Now the three classes, .ng-anchor, .ng-anchor-out, and .ng-anchor-in are applied to whatever element we have set the ng-animate-ref attribute on. So if we wanted to, we could come in here and increase the specificity of these selectors, so that we have the posts class followed by .ng-anchor. We could also come down here and do the same thing for .ng-anchor-out and .ng-anchor-in. And so that is Angular 1.4's animation anchoring. It's a nice little addition to ng-animate. And it can be a pretty cool feature if it's used in the right way.