Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Learning AngularJS Animations
  • Table Of Contents Toc
  • Feedback & Rating feedback
Learning AngularJS Animations

Learning AngularJS Animations

By : Keller
4.5 (2)
Buy this Book
close
close
Learning AngularJS Animations

Learning AngularJS Animations

4.5 (2)
By: Keller
Buy this Book

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.
Table of Contents (10 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started
Icon
1. Getting Started
Icon
The definition of animation and the web context
Icon
The need for AngularJS animation
Icon
Choosing when to use JavaScript for animations
Icon
AngularJS – combining JavaScript and CSS3
Icon
Do it yourself exercises
Icon
Summary
2
2. Understanding CSS3 Transitions and Animations
Icon
2. Understanding CSS3 Transitions and Animations
Icon
CSS3 transitions
Icon
CSS3 keyframe animations
Icon
CSS3 transforms
Icon
Exercise
Icon
Summary
3
3. Creating Our First Animation in AngularJS
Icon
3. Creating Our First Animation in AngularJS
Icon
The ngAnimate module setup and usage
Icon
AngularJS directives with native support for animations
Icon
AngularJS animation with CSS transitions
Icon
AngularJS animation with CSS keyframe animations
Icon
The CSS naming convention
Icon
The ngMessage and ngMessages directive animations
Icon
The ngView directive animation
Icon
Do it yourself exercises
Icon
Summary
4
4. JavaScript Animations in AngularJS
Icon
4. JavaScript Animations in AngularJS
Icon
Creating AngularJS animation without CSS3
Icon
JavaScript animations as a fallback for CSS animations
Icon
Do it yourself exercises
Icon
Summary
5
5. Custom Directives and the $animate Service
Icon
5. Custom Directives and the $animate Service
Icon
Triggering animations on custom directives
Icon
Animating the enter and leave events
Icon
Creating a custom directive animated with JavaScript
Icon
Exercises
Icon
Summary
6
6. Animations for Mobile Devices
Icon
6. Animations for Mobile Devices
Icon
Enhance UX on mobile devices with animations
Icon
Transition between views
Icon
Mobile AngularJS frameworks
Icon
Summary
7
7. Staggering Animations
Icon
7. Staggering Animations
Icon
Creating staggering animations
Icon
Creating staggering animations for other native directives
Icon
Create staggering animations for custom directives
Icon
Summary
8
8. Animations' Performance Optimization
chevron up
Icon
8. Animations' Performance Optimization
Icon
The display and the frame rate
Icon
Finding performance bottlenecks using Chrome DevTools
Icon
Measuring browser layers and Jank on Chrome
Icon
CSS styles in animations you should avoid
Icon
Summary
9
Index
Icon
Index

Measuring browser layers and Jank on Chrome

We just saw that using Chrome DevTools helps us find performance bottlenecks. Now, we are going to see how to find paint layers and enhance an animation just by replacing some CSS properties.

For this sample, we will create a sliding menu such that when we click on a button and it slides from the left menu items, the page content slides to the right too. When we click on the button again, both the menu and page content slides to the left until the menu vanishes from the viewport.

The following HTML will be used:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Performance</title>
  <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" />
  <link href="performance.css" rel="stylesheet" />
</head>
<body>
  <div id="menu" data-ng-show="showMenu">
    <nav class="navbar-collapse bs-navbar-collapse collapse in">
      <ul class="nav navbar...
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Learning AngularJS Animations
End of Section 8
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon