Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Do it yourself exercises


The following are some exercises that you can refer to that will help you understand the concepts of this chapter better:

  1. Create a spinning loading animation using the ngShow or ngHide directives that appears when the scope controller variable, $scope.isLoading, is equal to true.

  2. Using exercise 1, create a gray background layer with opacity 0.5 that smoothly fills the entire page behind the loading spin, and after page content is loaded, covers all the content until isProcessing becomes false. The effect should be that of a drop of ink that is dropped on a piece of paper and spreads until it's completely stained.

  3. Create a success notification animation, similar to the ngShow example, but instead of using the fade animation, use a slide-down animation. So, the success message starts with height:0px. Check http://api.jquery.com/slidedown/ for the expected animation effect.

  4. Copy any animation from the http://capptivate.co/ website, using AngularJS and CSS animations.