Chapter 9 ■ angularJS animation
/ enter event - start class /
.my-slide-animation.ng-enter {
top: -50px;
}
/ enter event - end class, leave event - start class /
.my-slide-animation.ng-enter.ng-enter-active, .my-slide-animation.ng-leave {
top: 0;
}
/ leave event - end class /
.my-slide-animation.ng-leave.ng-leave-active {
top: 100px;
}
Looking at the CSS in Listing 9-8, you can see that much of this is fairly standard, so I will only cover the bits that
are relevant to our animation effect. It’s difficult to tell much from a screenshot, though Figure 9-5 shows the initial
state of play.
Figure 9-5. The content slider
Here’s how it works: using the drop-down list, you can select a person. Once selected, the current person content
will slide down and out of view, and the content for the currently selected person will slide up into view.
Crucial to understanding the CSS is the idea that we are creating hooks for both the enter and the leave events.
Also, unlike our first example, we now have two animations running concurrently: the content being moved away
and the content being moved in. The comments in the CSS explain the purpose of each class, and you can see that
the start and end classes for both events all deal with the position of the content. It’s either positioning it so that it
is visible or positioning it so that it is hidden. Of course, the reason it doesn’t just abruptly appear is because of the
transition that we have set up on both my-slide-animation.ng-enter and my-slide-animation.ng-leave.
Let’s turn our attention to Listing 9-5. You can see that we have taken care of the fundamental need to set up the
ngAnimate dependency on our application module. As for the controller, all we do here is set up an array of objects,
each of which is simply the name of a person and the location of a HTML file that contains content about that person
(Listings 9-6 and 9-7 show the content of these two files). We put this array into the current scope via the templates
property. Also, note that we set a default template in the current scope, so that the view doesn’t start out empty.
There are a couple of interesting things going on in the view portion of this code listing. We can see an HTML
select list that includes all of the template objects in the templates array and, importantly, which particular array item
is bound to the template variable. This acts as the trigger that causes the animation to start.