O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning AngularJS Animations

Book Description

Enhance user experience with awesome animations in AngularJS using CSS and JavaScript

In Detail

AngularJS is an extensive framework used to make full-blown websites with minimal code. Animations in AngularJS are achieved through CSS3 transitions, CSS animations, and JavaScript. AngularJS allows you to create animations with outstanding effects. There are a variety of effects that can be integrated with AngularJS and different ways to achieve the same result. Learning AngularJS Animations will help you choose a way that best fits your needs. This guide is a complete step-by-step tutorial to improving UX by using animations in AngularJS projects. The first few chapters explain the basics of CSS3 transitions and animations and all the available features such as CSS3 keyframes to be used together with AngularJS, also covering how to move beyond JavaScript animations. The book then shows you how to choose an appropriate approach for creating web apps. It provides you with an understanding of how AngularJS native directives can be animated with CSS or JavaScript and how to animate custom directives using the $animate service.

Finally, you will learn powerful optimization tricks to improve the speed and quality of your animations.

What You Will Learn

  • Create animations with CSS3 transitions and CSS3 keyframe animations
  • Develop CSS animations integrated with AngularJS native directives
  • Use JavaScript to create animations integrated with AngularJS native directives
  • Discover the naming convention for the ngAnimate module
  • Understand when to create animations with CSS or JavaScript
  • Inject the $animate service in custom directives to create animations
  • Animate directives focused on mobile devices' UX

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning AngularJS Animations
    1. Table of Contents
    2. Learning AngularJS Animations
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Getting Started
      1. The definition of animation and the web context
      2. The need for AngularJS animation
      3. Choosing when to use JavaScript for animations
      4. AngularJS – combining JavaScript and CSS3
      5. Do it yourself exercises
      6. Summary
    9. 2. Understanding CSS3 Transitions and Animations
      1. CSS3 transitions
        1. The transition-timing-function property
        2. The transition-delay property
        3. Animatable properties
      2. CSS3 keyframe animations
        1. Defining an animation using keyframes
        2. Separating timing functions for each keyframe interval
        3. Other CSS keyframe animations' properties
      3. CSS3 transforms
        1. The scale function
        2. The translate function
        3. The skew function
      4. Exercise
      5. Summary
    10. 3. Creating Our First Animation in AngularJS
      1. The ngAnimate module setup and usage
      2. AngularJS directives with native support for animations
        1. Fade animations using AngularJS
        2. The AngularJS animations convention
      3. AngularJS animation with CSS transitions
        1. The ng-enter class
        2. The ng-leave class
      4. AngularJS animation with CSS keyframe animations
      5. The CSS naming convention
        1. The ngClass directive animation sample
        2. The ngHide and ngShow animation sample
        3. The ngModel directive and form animations
      6. The ngMessage and ngMessages directive animations
      7. The ngView directive animation
        1. The ngSwitch directive animation
        2. The ngInclude directive sample
      8. Do it yourself exercises
      9. Summary
    11. 4. JavaScript Animations in AngularJS
      1. Creating AngularJS animation without CSS3
        1. The ngHide JavaScript animation
        2. The ngIf JavaScript animation
        3. The ngRepeat JavaScript animation
      2. JavaScript animations as a fallback for CSS animations
      3. Do it yourself exercises
      4. Summary
    12. 5. Custom Directives and the $animate Service
      1. Triggering animations on custom directives
      2. Animating the enter and leave events
        1. Using the $animate.move method
      3. Creating a custom directive animated with JavaScript
      4. Exercises
      5. Summary
    13. 6. Animations for Mobile Devices
      1. Enhance UX on mobile devices with animations
      2. Transition between views
      3. Mobile AngularJS frameworks
      4. Summary
    14. 7. Staggering Animations
      1. Creating staggering animations
        1. Staggering animations with a CSS transition
        2. Staggering animations with a CSS keyframes animation
      2. Creating staggering animations for other native directives
      3. Create staggering animations for custom directives
      4. Summary
    15. 8. Animations' Performance Optimization
      1. The display and the frame rate
      2. Finding performance bottlenecks using Chrome DevTools
        1. Checking FPS using Show fps meter
      3. Measuring browser layers and Jank on Chrome
      4. CSS styles in animations you should avoid
      5. Summary
    16. Index