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
About the Author
About the Reviewers

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">
  <link href="" rel="stylesheet" />
  <link href="performance.css" rel="stylesheet" />
  <div id="menu" data-ng-show="showMenu">
    <nav class="navbar-collapse bs-navbar-collapse collapse in">
      <ul class="nav navbar...