You can add some excitement to your application using a combination of CSS3 animation along with Angular's unique animation functions. With AngularJS, you can enhance traditional animations by downloading modules and then adding directives to your template. Learn more about the process of using Angular animation events in AngularJS to create exciting animations by watching this online video tutorial.
…So it's time to add some pizzazz to our application.…We're going to do that in two ways.…We're going to add a bit of traditional CSS3…animation, and then use Angular's special animation capabilities.…So, I'm going to switch over to my application, and I'm…going to open up the CSS folder and the styles.css document.…I'm going to scroll to the section where I deal with my…list items, and I'm going to add some CSS transitions in here.…So first, I'll add some opacity, and I'll set the opacity…by default of the list items to be 0.9, it's 90% opaque.…
And then I'm going to set up some transitions to make it…more compatible with older browsers, I'm going to have to use the prefixes.…So our transition is set to animate everything for three-tenths…of a second and use the ease-out effect in the transition.…So this just sets up how our animation is going to behave.…Now I'm going to need to modify how that transition works.…That will happen in the hover declaration down here.…We'll set the opacity here to 1, and then…
- What is AngularJS?
- Working with complex models
- Using a the $http service to read a JSON file
- Binding data
- Dividing your app into partials
- Creating a details template
- Using AngularJS animation events
Skill Level Intermediate
Q: This course was updated on 12/11/2015. What changed?
A: We updated two movies ("Creating our details template" and "Adding navigation to our details page") to reflect changes to AngularJS 1.4.8 and the 1.5 beta.