Learning AngularJS Animations电子书

Learning AngularJS Animations

Table of Contents

Learning AngularJS Animations

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started

The definition of animation and the web context

The need for AngularJS animation

Choosing when to use JavaScript for animations

AngularJS – combining JavaScript and CSS3

Do it yourself exercises

Summary

2. Understanding CSS3 Transitions and Animations

CSS3 transitions

The transition-timing-function property

The transition-delay property

Animatable properties

CSS3 keyframe animations

Defining an animation using keyframes

Separating timing functions for each keyframe interval

Other CSS keyframe animations' properties

CSS3 transforms

The scale function

The translate function

The skew function

Exercise

Summary

3. Creating Our First Animation in AngularJS

The ngAnimate module setup and usage

AngularJS directives with native support for animations

Fade animations using AngularJS

The AngularJS animations convention

AngularJS animation with CSS transitions

The ng-enter class

The ng-leave class

AngularJS animation with CSS keyframe animations

The CSS naming convention

The ngClass directive animation sample

The ngHide and ngShow animation sample

The ngModel directive and form animations

The ngMessage and ngMessages directive animations

The ngView directive animation

The ngSwitch directive animation

The ngInclude directive sample

Do it yourself exercises

Summary

4. JavaScript Animations in AngularJS

Creating AngularJS animation without CSS3

The ngHide JavaScript animation

The ngIf JavaScript animation

The ngRepeat JavaScript animation

JavaScript animations as a fallback for CSS animations

Do it yourself exercises

Summary

5. Custom Directives and the $animate Service

Triggering animations on custom directives

Animating the enter and leave events

Using the $animate.move method

Creating a custom directive animated with JavaScript

Exercises

Summary

6. Animations for Mobile Devices

Enhance UX on mobile devices with animations

Transition between views

Mobile AngularJS frameworks

Summary

7. Staggering Animations

Creating staggering animations

Staggering animations with a CSS transition

Staggering animations with a CSS keyframes animation

Creating staggering animations for other native directives

Create staggering animations for custom directives

Summary

8. Animations' Performance Optimization

The display and the frame rate

Finding performance bottlenecks using Chrome DevTools

Checking FPS using Show fps meter

Measuring browser layers and Jank on Chrome

CSS styles in animations you should avoid

Summary

Index