chore(benchmarks): add basic animation benchmark

Author: gkalpak

benchmarks/animation-bp/app.js

@@ -0,0 +1,44 @@
+'use strict';
+
+angular
+  .module('animationBenchmark', ['ngAnimate'], config)
+  .controller('BenchmarkController', BenchmarkController);
+
+// Functions - Definitions
+function config($compileProvider) {
+  $compileProvider
+    .commentDirectivesEnabled(false)
+    .cssClassDirectivesEnabled(false)
+    .debugInfoEnabled(false);
+}
+
+function BenchmarkController($scope) {
+  var self = this;
+  var itemCount = 1000;
+  var items = (new Array(itemCount + 1)).join('.').split('');
+
+  benchmarkSteps.push({
+    name: 'create',
+    fn: function() {
+      $scope.$apply(function() {
+        self.items = items;
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: '$digest',
+    fn: function() {
+      $scope.$root.$digest();
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'destroy',
+    fn: function() {
+      $scope.$apply(function() {
+        self.items = [];
+      });
+    }
+  });
+}

benchmarks/animation-bp/bp.conf.js

@@ -0,0 +1,22 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = function(config) {
+  config.set({
+    scripts: [
+      {
+        id: 'jquery',
+        src: 'jquery-noop.js'
+      }, {
+        id: 'angular',
+        src: '/build/angular.js'
+      }, {
+        id: 'angular-animate',
+        src: '/build/angular-animate.js'
+      }, {
+        src: 'app.js'
+      }
+    ]
+  });
+};

benchmarks/animation-bp/jquery-noop.js

@@ -0,0 +1 @@
+// Override me with ?jquery=/bower_components/jquery/dist/jquery.js

benchmarks/animation-bp/main.html

@@ -0,0 +1,28 @@
+<style>
+  [ng-cloak] { display: none !important; }
+  .animation-container .ng-enter,
+  .animation-container .ng-leave {
+    transition: all 0.1s;
+  }
+
+  .animation-container .ng-enter,
+  .animation-container .ng-leave.ng-leave-active {
+    opacity: 0;
+  }
+
+  .animation-container .ng-enter.ng-enter-active,
+  .animation-container .ng-leave {
+    opacity: 1;
+  }
+</style>
+<div ng-app="animationBenchmark" ng-cloak ng-controller="BenchmarkController as bm">
+  <div class="container-fluid">
+    <h2>Large collection of elements animated in and out with ngAnimate</h2>
+
+    <div class="animation-container">
+      <div ng-repeat="i in bm.items track by $index">
+        Just a plain ol' element
+      </div>
+    </div>
+  </div>
+</div>