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

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...