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

Index

A

  • $animate.addClass method / Triggering animations on custom directives
  • $animate.enter method / Animating the enter and leave events
  • $animate.leave method / Animating the enter and leave events
  • $animate.move method
    • using / Using the $animate.move method
  • $animate.removeClass method / Triggering animations on custom directives
  • $animate methods / Triggering animations on custom directives
  • AngularJS
    • about / The ngAnimate module setup and usage, AngularJS directives with native support for animations
    • URL / The ngAnimate module setup and usage, The ngHide and ngShow animation sample
    • versions / The ngAnimate module setup and usage
    • used, for creating fade animations / Fade animations using AngularJS
    • animations convention / The AngularJS animations convention
  • AngularJS 2.0 Touch Animations / Transition between views
  • AngularJS animation
    • need for / The need for AngularJS animation
    • binding, with CSS transitions / AngularJS animation with CSS transitions
    • ng-enter class, using / The ng-enter class
    • ng-leave class, using / The ng-leave class
    • binding, with CSS keyframe animations / AngularJS animation with CSS keyframe animations
    • creating, without CSS3 / Creating AngularJS animation without CSS3
    • ngHide JavaScript animation / The ngHide JavaScript animation
    • ngIf JavaScript animation / The ngIf JavaScript animation
    • ngRepeat JavaScript animation / The ngRepeat JavaScript animation
  • AngularJS animations convention / The AngularJS animations convention
  • animatable properties
    • about / Animatable properties
    • URL / Animatable properties
    • examples / Animatable properties
  • animation
    • definition / The definition of animation and the web context
  • animation-delay property / Other CSS keyframe animations' properties
  • animation-direction property / Other CSS keyframe animations' properties
  • animation-fill-mode property / Other CSS keyframe animations' properties
  • animation-iteration-count property / Other CSS keyframe animations' properties
  • animation-name property / Defining an animation using keyframes
  • animation-play-state property / Other CSS keyframe animations' properties
  • animations
    • triggering, on custom directives / Triggering animations on custom directives
    • used, for enhancing UX on mobile devices / Enhance UX on mobile devices with animations
  • animations, for JavaScript
    • usage criteria, selecting / Choosing when to use JavaScript for animations
  • authentic motion / Enhance UX on mobile devices with animations

B

  • beforeAddClass callback function / The ngHide JavaScript animation
  • bower
    • URL / The ngAnimate module setup and usage
  • browser layers
    • measuring, on Chrome / Measuring browser layers and Jank on Chrome
    • measuring, on Jank / Measuring browser layers and Jank on Chrome

C

  • Central Processing Unit (CPU) / Choosing when to use JavaScript for animations
  • Chrome
    • browser layers, measuring on / Measuring browser layers and Jank on Chrome
  • Chrome Developer Tools (Chrome DevTool) / AngularJS animation with CSS transitions
  • Chrome Dev Tools
    • used, for searching performance bottlenecks / Finding performance bottlenecks using Chrome DevTools
  • content distribution network (CDN) / The ngAnimate module setup and usage
  • Cordova
    • URL / Mobile AngularJS frameworks
  • CSS3
    • combining, with JavaScript / AngularJS – combining JavaScript and CSS3
    • advantage / AngularJS – combining JavaScript and CSS3
  • CSS3 keyframe animations
    • about / CSS3 keyframe animations
    • defining, keyframes used / Defining an animation using keyframes
    • timing functions, separating for keyframe interval / Separating timing functions for each keyframe interval
    • properties / Other CSS keyframe animations' properties
  • CSS3 media queries
    • about / Enhance UX on mobile devices with animations
    • URL / Enhance UX on mobile devices with animations
  • CSS3 transforms
    • about / CSS3 transforms
    • scale function / The scale function
    • translate function / The translate function
    • skew function / The skew function
  • CSS3 transitions
    • about / CSS3 transitions
    • transition timing function / The transition-timing-function property
    • transition-delay / The transition-delay property
    • animatable properties / Animatable properties
  • CSS animations
    • URL / Other CSS keyframe animations' properties
    • JavaScript animations, using as fallback for / JavaScript animations as a fallback for CSS animations
  • CSS animations and transitions
    • URL / Choosing when to use JavaScript for animations
  • cssanimationTimes class / CSS3 transitions
  • CSS keyframe animations
    • AngularJS animation, binding with / AngularJS animation with CSS keyframe animations
  • CSS keyframes animation
    • staggering animations, using with / Staggering animations with a CSS keyframes animation
  • CSS naming convention
    • about / The CSS naming convention
    • ngClass directive animation sample / The ngClass directive animation sample
    • ngHide animation / The ngHide and ngShow animation sample
    • ngShow animation / The ngHide and ngShow animation sample
    • ngModel directive / The ngModel directive and form animations
    • form animations / The ngModel directive and form animations
  • CSS styles, in animations
    • avoiding / CSS styles in animations you should avoid
  • CSS transition
    • staggering animations, using with / Staggering animations with a CSS transition
  • CSS transitions
    • AngularJS animation, binding with / AngularJS animation with CSS transitions
  • cubic-bezier(<number>,<number>,<number>,<number>) property / The transition-timing-function property
  • cubic Bézier curves
    • URL / The transition-timing-function property
  • custom directive animated, with JavaScript
    • creating / Creating a custom directive animated with JavaScript
  • custom directives
    • animations, triggering on / Triggering animations on custom directives
    • staggering animations, creating for / Create staggering animations for custom directives

D

  • directives
    • ngRepeat / Creating AngularJS animation without CSS3
    • ngView / Creating AngularJS animation without CSS3
    • ngInclude / Creating AngularJS animation without CSS3
    • ngSwitch / Creating AngularJS animation without CSS3
    • ngIf / Creating AngularJS animation without CSS3
    • ngClass / Creating AngularJS animation without CSS3
    • ngHide / Creating AngularJS animation without CSS3
    • ngShow / Creating AngularJS animation without CSS3
    • ngModel / Creating AngularJS animation without CSS3
    • form / Creating AngularJS animation without CSS3
    • ngMessages / Creating AngularJS animation without CSS3
    • ngMessage / Creating AngularJS animation without CSS3
  • Document Object Model (DOM) / AngularJS directives with native support for animations

E

  • ease-in-out property / The transition-timing-function property
  • ease-in property / The transition-timing-function property
  • ease-out property / The transition-timing-function property
  • ease property / The transition-timing-function property
  • enter events
    • animating / Animating the enter and leave events

F

  • fade animations
    • creating, with AngularJS / Fade animations using AngularJS
  • form animations / The ngModel directive and form animations
  • FPS
    • checking, with Show fps meter / Checking FPS using Show fps meter
  • frame rate
    • displaying / The display and the frame rate

G

  • Google Material Design
    • URL / The need for AngularJS animation
  • Graphics Processing Unit (GPU) / Choosing when to use JavaScript for animations

H

  • high-performance animations
    • URL / Choosing when to use JavaScript for animations
  • high performance animations
    • URL / CSS styles in animations you should avoid

I

  • Ionic
    • URL / Mobile AngularJS frameworks

J

  • Jank
    • browser layers, measuring on / Measuring browser layers and Jank on Chrome
  • JavaScript
    • combining, with CSS3 / AngularJS – combining JavaScript and CSS3
  • JavaScript animations
    • using, as fallback for CSS animations / JavaScript animations as a fallback for CSS animations
  • jQuery
    • URL / Creating AngularJS animation without CSS3

K

  • keyframes
    • used, for defining animations / Defining an animation using keyframes

L

  • layer performance hack
    • URL / CSS styles in animations you should avoid
  • leave events
    • animating / Animating the enter and leave events
  • linear property / The transition-timing-function property

M

  • material design
    • URL / Enhance UX on mobile devices with animations
  • meaning transitions / Enhance UX on mobile devices with animations
  • Microsoft CDN libraries
    • URL / The ngHide and ngShow animation sample
  • mobile AngularJS frameworks
    • Ionic / Mobile AngularJS frameworks
    • Cordova / Mobile AngularJS frameworks
    • PhoneGap / Mobile AngularJS frameworks
    • Mobile Angular UI / Mobile AngularJS frameworks
  • Mobile Angular UI
    • URL / Mobile AngularJS frameworks
  • Model View Whatever (MVW) / The need for AngularJS animation
  • Modernizr
    • about / JavaScript animations as a fallback for CSS animations
    • URL / JavaScript animations as a fallback for CSS animations
  • Modernizr.cssanimations property / JavaScript animations as a fallback for CSS animations

N

  • native directives
    • staggering animations, creating for / Creating staggering animations for other native directives
  • ng-enter class / The ng-enter class
  • ng-leave class / The ng-leave class
  • ngAnimate module / The need for AngularJS animation
    • setup / The ngAnimate module setup and usage
    • usage / The ngAnimate module setup and usage
  • ngClass directive animation sample / The ngClass directive animation sample
  • ngHide JavaScript animation / The ngHide JavaScript animation
  • ngIf JavaScript animation / The ngIf JavaScript animation
  • ngInclude directive sample / The ngInclude directive sample
  • ngMessages directive animation / The ngMessage and ngMessages directive animations
  • ngModel directive / The ngModel directive and form animations
  • ngRepeat directive / The CSS naming convention
  • ngRepeat JavaScript animation / The ngRepeat JavaScript animation
  • ngSwitch directive animation / The ngSwitch directive animation
  • ngView directive animation
    • about / The ngView directive animation
    • ngSwitch directive animation / The ngSwitch directive animation
    • ngInclude directive sample / The ngInclude directive sample

P

  • performance bottlenecks
    • searching, with Chrome Dev Tools / Finding performance bottlenecks using Chrome DevTools
  • PhoneGap
    • URL / Mobile AngularJS frameworks
  • properties, CSS3 keyframe animations
    • animation-fill-mode / Other CSS keyframe animations' properties
    • animation-iteration-count / Other CSS keyframe animations' properties
    • animation-direction / Other CSS keyframe animations' properties
    • animation-delay / Other CSS keyframe animations' properties
    • animation-play-state / Other CSS keyframe animations' properties

R

  • remote debugging setup, Chrome / Checking FPS using Show fps meter
  • removeClass callback function / The ngHide JavaScript animation
  • requestAnimateFram
    • about / Choosing when to use JavaScript for animations
  • requestAnimationFrame
    • URL / Do it yourself exercises
  • Request Animation Frame (RAF)
    • about / The display and the frame rate
    • URL / The display and the frame rate

S

  • scale function
    • using / The scale function
    • about / The scale function
  • Show fps meter
    • used, for checking FPS / Checking FPS using Show fps meter
  • skew function
    • using / The skew function
    • about / The skew function
  • skewX() function / The skew function
  • skewY() function / The skew function
  • staggering animations
    • about / Creating staggering animations
    • creating / Creating staggering animations
    • using, with CSS transition / Staggering animations with a CSS transition
    • using, with CSS keyframes animation / Staggering animations with a CSS keyframes animation
    • creating, for other native directives / Creating staggering animations for other native directives
    • creating, for custom directives / Create staggering animations for custom directives
  • Steller animations
    • URL / Exercises
  • step-end property / The transition-timing-function property
  • step-start property / The transition-timing-function property
  • steps(<integer>[,[start|end]]?) property / The transition-timing-function property
  • swipe-to-left gesture animation effect / Transition between views

T

  • timing functions
    • separating, for keyframe interval / Separating timing functions for each keyframe interval
  • transition-delay / The transition-delay property
  • transitioning
    • about / Transition between views
  • transition timing function / The transition-timing-function property
  • translate function
    • about / The translate function
  • Twitter Bootstrap library
    • URL / The ngHide and ngShow animation sample

U

  • UX
    • enhancing, on mobile devices with animations / Enhance UX on mobile devices with animations

V

  • views
    • transitioning between / Transition between views

W

  • W3C
    • URL / The definition of animation and the web context
  • web context
    • definition / The definition of animation and the web context