Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

fix(ngAnimate): correctly animate transcluded clones with templateUrl #15514

Closed
44 changes: 44 additions & 0 deletions benchmarks/animation-bp/app.js
Original file line number Diff line number Diff line change
@@ -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 = [];
});
}
});
}
22 changes: 22 additions & 0 deletions benchmarks/animation-bp/bp.conf.js
Original file line number Diff line number Diff line change
@@ -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'
}
]
});
};
1 change: 1 addition & 0 deletions benchmarks/animation-bp/jquery-noop.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
28 changes: 28 additions & 0 deletions benchmarks/animation-bp/main.html
Original file line number Diff line number Diff line change
@@ -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>
Loading