Beginning AngularJS

Chapter 9 ■ angularJS animation

.navButton:hover {
width: 110px;
background-color: green;
color: #ffffff;
}

Home

About Us

Contact Us

As you can see, we have two classes: the first one sets up the transition, and the second one is the end state of
that transition. We have also explicitly stated which properties are to be transitioned and how long it should take for
the transitions to complete. We have set a value of .5s (half a second) for each transition duration, though it is actually
possible to give each CSS property a separate duration value (which can make for some very interesting effects).
The transition is triggered by users when they hover over one of the .navButton elements. You can use other
pseudo-classes as triggers for animations too, such as transitioning a form field to a new color when the user tabs
or clicks into it (using the :focus pseudo-class). You aren’t limited to using pseudo-classes; you can create triggers
yourself, using JavaScript to add and remove classes programmatically.
I can’t show a screenshot of an animation, of course, but Figure 9-3 illustrates the start and end states. With the
mouse over the About Us div, we can see that each of the properties we specified has indeed transitioned from one set
of values to the other.

Figure 9-3. Transitions

Things can get really interesting when you combine transforms with transitions, so I will finish up with an
example of how this is done. In fact, you already know how to do it, because transform is a property just like any
other; therefore, it can be transitioned. Examine Listing 9-3.

Listing 9-3. Combining Transform and Transition

<!DOCTYPE html>

Transform and Transition