Learning AngularJS Animations

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

Learning AngularJS Animations

Learning
Richard Keller

Enhance user experience with awesome animations in AngularJS using CSS and JavaScript
$14.99
$24.99
RRP $14.99
RRP $24.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Code Files
+ Collection
Free Sample

Book Details

ISBN 139781783984428
Paperback182 pages

Book Description

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.

Table of Contents

Chapter 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
Chapter 2: Understanding CSS3 Transitions and Animations
CSS3 transitions
CSS3 keyframe animations
CSS3 transforms
Exercise
Summary
Chapter 3: Creating Our First Animation in AngularJS
The ngAnimate module setup and usage
AngularJS directives with native support for animations
AngularJS animation with CSS transitions
AngularJS animation with CSS keyframe animations
The CSS naming convention
The ngMessage and ngMessages directive animations
The ngView directive animation
Do it yourself exercises
Summary
Chapter 4: JavaScript Animations in AngularJS
Creating AngularJS animation without CSS3
JavaScript animations as a fallback for CSS animations
Do it yourself exercises
Summary
Chapter 5: Custom Directives and the $animate Service
Triggering animations on custom directives
Animating the enter and leave events
Creating a custom directive animated with JavaScript
Exercises
Summary
Chapter 6: Animations for Mobile Devices
Enhance UX on mobile devices with animations
Transition between views
Mobile AngularJS frameworks
Summary
Chapter 7: Staggering Animations
Creating staggering animations
Creating staggering animations for other native directives
Create staggering animations for custom directives
Summary
Chapter 8: Animations' Performance Optimization
The display and the frame rate
Finding performance bottlenecks using Chrome DevTools
Measuring browser layers and Jank on Chrome
CSS styles in animations you should avoid
Summary

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

Authors

Table of Contents

Chapter 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
Chapter 2: Understanding CSS3 Transitions and Animations
CSS3 transitions
CSS3 keyframe animations
CSS3 transforms
Exercise
Summary
Chapter 3: Creating Our First Animation in AngularJS
The ngAnimate module setup and usage
AngularJS directives with native support for animations
AngularJS animation with CSS transitions
AngularJS animation with CSS keyframe animations
The CSS naming convention
The ngMessage and ngMessages directive animations
The ngView directive animation
Do it yourself exercises
Summary
Chapter 4: JavaScript Animations in AngularJS
Creating AngularJS animation without CSS3
JavaScript animations as a fallback for CSS animations
Do it yourself exercises
Summary
Chapter 5: Custom Directives and the $animate Service
Triggering animations on custom directives
Animating the enter and leave events
Creating a custom directive animated with JavaScript
Exercises
Summary
Chapter 6: Animations for Mobile Devices
Enhance UX on mobile devices with animations
Transition between views
Mobile AngularJS frameworks
Summary
Chapter 7: Staggering Animations
Creating staggering animations
Creating staggering animations for other native directives
Create staggering animations for custom directives
Summary
Chapter 8: Animations' Performance Optimization
The display and the frame rate
Finding performance bottlenecks using Chrome DevTools
Measuring browser layers and Jank on Chrome
CSS styles in animations you should avoid
Summary

Book Details

ISBN 139781783984428
Paperback182 pages
Read More

DEAL OF THE DAY

Sign up here to get exclusive deep discounts on our latest and bestselling eBooks, delivered straight to your inbox every day.

FREE LEARNING FOREVER

Master new IT skills and unlock valuable software & web development knowledge with a FREE eBook every day.

Recommended for You

AngularJS UI Development
$ 26.99
Design, build, and test production-ready applications in AngularJS
AngularJS Web Application Development Cookbook
$ 29.99
Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS
Responsive Web Design with AngularJS
$ 17.99
Leverage the core functionalities of AngularJS, to build responsive single page applications
AngularJS by Example
$ 24.99
Tackle the challenges of modern web development with this AngularJS tutorial, packed with practical examples and projects that make learning AngularJS simple
Mastering AngularJS Directives
$ 25.99
Develop, maintain, and test production-ready directives for any AngularJS-based application.
Designing Next Generation Web Projects with CSS3
$ 26.99
A practical guide to the usage of CSS3 – a journey through properties, tools, and techniques to better understand CSS3