Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Learning AngularJS Animations

By : Keller

4.5 (2)

Learning AngularJS Animations

4.5 (2)

By: Keller

Overview of this book

If you are a developer who is new to AngularJS or is experienced with the AngularJS framework, this book is intended for you. If you want to provide a better user experience on your web app, this book is also for you.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started

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

2. Understanding CSS3 Transitions and Animations

CSS3 transitions

CSS3 keyframe animations

CSS3 transforms

Exercise

Summary

3. Creating Our First Animation in AngularJS

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

4. JavaScript Animations in AngularJS

4. JavaScript Animations in AngularJS

Creating AngularJS animation without CSS3

JavaScript animations as a fallback for CSS animations

Do it yourself exercises

Summary

5. Custom Directives and the $animate Service

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

6. Animations for Mobile Devices

6. Animations for Mobile Devices

Enhance UX on mobile devices with animations

Transition between views

Mobile AngularJS frameworks

Summary

7. Staggering Animations

7. Staggering Animations

Creating staggering animations

Creating staggering animations for other native directives

Create staggering animations for custom directives

Summary

8. Animations' Performance Optimization

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

Index

Index

Customer Reviews

4.5 (2)

5 star

50%

4 star

50%

3 star

0%

2 star

0%

1 star

0%

CSS3 transitions

Before CSS3 transitions, when style properties of DOM elements were changed, web browsers applied new styles immediately after the operation, so the effects were rendered abruptly. As we saw in the last chapter, we could use JavaScript or jQuery to imperatively add a transition while changing the style. This is an option, but we already saw some reasons why CSS transitions might be a better choice. In Chapter 8, Animation Performance Optimization, we will learn more about the optimization of animations. CSS3 transitions enable developers to create implicit, smooth transitions when changing the CSS property of elements. We can avoid a loading animation to get frozen while JavaScript is under heavy processing by using CSS transitions. This will make a huge difference to the user's perception of quality.

Let's check a complete transition animation declaration and see how it works:

<!DOCTYPE html>
<html>
<head>
    <title>Chapter 2 - First sample...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning AngularJS Animations

Search

Your notes and bookmarks