Chapter 9 ■ angularJS animation
■ Note the supported directives will only make use of these classes if the ngAnimate module is present and you have
set up the associated dependency, as discussed earlier in this section.
These classes only become active when Angular or more specifically in this case, the ngIf directive, determines
that they are applicable. Of course, our ability to use this system relies on our knowing when these events take place.
With that in mind, look at Table 9-2.
Let’s examine a slightly more involved animation example. This time, we will create a slider effect, sliding some
content into view while sliding any existing content out of view. I hope that this will round off everything we have
discussed so far and leave you fully prepared to tackle some serious experimentation. Ultimately, this will be the best
way to come to grips with how the animation module works.
When you are reading through Listing 9-5, keep in mind that this time, we are animating for both the enter and
the leave events, new content arriving (entering) and the original content leaving.
Listing 9-5. Sliding Content Animation, animate-two.html.
<!DOCTYPE html>
Table 9-2. When Events Occur
Event Description
enter When the new content is to be animated in
leave When the former content is to be animated out
move When a DOM element is moved from one position in the repeat list to another position
add When the new CSS class is to be animated in
remove When the old CSS class is to be animated out