Skip to content

Commit 570463a

Browse files
mheverymhevery
committed
fix(ngAnimate): prevent animation on initial page load
1 parent 3c3247f commit 570463a

8 files changed

+262
-228
lines changed

‎src/ng/animator.js

+196-204
Large diffs are not rendered by default.

‎test/ng/animatorSpec.js

+35-9
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22

33
describe("$animator", function() {
44

5-
var body, element;
5+
var body, element, $rootElement;
66

77
function html(html) {
8-
body.html(html);
9-
element = body.children().eq(0);
8+
body.append($rootElement);
9+
$rootElement.html(html);
10+
element = $rootElement.children().eq(0);
1011
return element;
1112
}
1213

@@ -21,7 +22,18 @@ describe("$animator", function() {
2122

2223
describe("enable / disable", function() {
2324

24-
it("should disable and enable the animations", inject(function($animator) {
25+
beforeEach(function() {
26+
module(function($animationProvider, $provide) {
27+
$provide.value('$window', angular.mock.createMockWindow());
28+
});
29+
});
30+
31+
it("should disable and enable the animations", inject(function($animator, $rootScope, $window) {
32+
expect($animator.enabled()).toBe(false);
33+
34+
$rootScope.$digest();
35+
$window.setTimeout.expect(0).process();
36+
2537
expect($animator.enabled()).toBe(true);
2638

2739
expect($animator.enabled(0)).toBe(false);
@@ -40,9 +52,10 @@ describe("$animator", function() {
4052
module(function($animationProvider, $provide) {
4153
$provide.value('$window', window = angular.mock.createMockWindow());
4254
})
43-
inject(function($animator, $compile, $rootScope) {
55+
inject(function($animator, $compile, $rootScope, _$rootElement_) {
4456
animator = $animator($rootScope, {});
4557
element = $compile('<div></div>')($rootScope);
58+
$rootElement = _$rootElement_;
4659
})
4760
});
4861

@@ -131,7 +144,10 @@ describe("$animator", function() {
131144
animator = $animator($rootScope, {
132145
ngAnimate : '{enter: \'custom\'}'
133146
});
147+
134148
$rootScope.$digest(); // re-enable the animations;
149+
window.setTimeout.expect(0).process();
150+
135151
expect(element.contents().length).toBe(0);
136152
animator.enter(child, element);
137153
window.setTimeout.expect(1).process();
@@ -141,7 +157,10 @@ describe("$animator", function() {
141157
animator = $animator($rootScope, {
142158
ngAnimate : '{leave: \'custom\'}'
143159
});
144-
$rootScope.$digest();
160+
161+
$rootScope.$digest(); // re-enable the animations;
162+
window.setTimeout.expect(0).process();
163+
145164
element.append(child);
146165
expect(element.contents().length).toBe(1);
147166
animator.leave(child, element);
@@ -150,6 +169,7 @@ describe("$animator", function() {
150169
}));
151170

152171
it("should animate the move animation event", inject(function($animator, $compile, $rootScope) {
172+
$animator.enabled(true);
153173
animator = $animator($rootScope, {
154174
ngAnimate : '{move: \'custom\'}'
155175
});
@@ -165,6 +185,7 @@ describe("$animator", function() {
165185
}));
166186

167187
it("should animate the show animation event", inject(function($animator, $rootScope) {
188+
$animator.enabled(true);
168189
animator = $animator($rootScope, {
169190
ngAnimate : '{show: \'custom\'}'
170191
});
@@ -178,6 +199,7 @@ describe("$animator", function() {
178199
}));
179200

180201
it("should animate the hide animation event", inject(function($animator, $rootScope) {
202+
$animator.enabled(true);
181203
animator = $animator($rootScope, {
182204
ngAnimate : '{hide: \'custom\'}'
183205
});
@@ -192,6 +214,7 @@ describe("$animator", function() {
192214

193215
it("should assign the ngAnimate string to all events if a string is given",
194216
inject(function($animator, $sniffer, $rootScope) {
217+
$animator.enabled(true);
195218
if (!$sniffer.supportsTransitions) return;
196219
animator = $animator($rootScope, {
197220
ngAnimate : '"custom"'
@@ -237,6 +260,7 @@ describe("$animator", function() {
237260
}));
238261

239262
it("should run polyfillSetup and return the memento", inject(function($animator, $rootScope) {
263+
$animator.enabled(true);
240264
animator = $animator($rootScope, {
241265
ngAnimate : '{show: \'setup-memo\'}'
242266
});
@@ -248,6 +272,8 @@ describe("$animator", function() {
248272
}));
249273

250274
it("should not run if animations are disabled", inject(function($animator, $rootScope) {
275+
$animator.enabled(true);
276+
$rootScope.$digest(); // clear initial animation suppression
251277
$animator.enabled(false);
252278

253279
animator = $animator($rootScope, {
@@ -274,8 +300,10 @@ describe("$animator", function() {
274300
beforeEach(function() {
275301
module(function($animationProvider, $provide) {
276302
$provide.value('$window', window = angular.mock.createMockWindow());
277-
return function($sniffer) {
303+
return function($sniffer, _$rootElement_, $animator) {
278304
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
305+
$rootElement = _$rootElement_;
306+
$animator.enabled(true);
279307
};
280308
})
281309
});
@@ -288,8 +316,6 @@ describe("$animator", function() {
288316
ngAnimate : '{show: \'inline-show\'}'
289317
});
290318

291-
$rootScope.$digest(); // skip no-animate on first digest.
292-
293319
element.css('display','none');
294320
expect(element.css('display')).toBe('none');
295321
animator.show(element);

‎test/ng/directive/ngIncludeSpec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -303,8 +303,9 @@ describe('ngInclude ngAnimate', function() {
303303

304304
beforeEach(module(function($animationProvider, $provide) {
305305
$provide.value('$window', window = angular.mock.createMockWindow());
306-
return function($sniffer) {
306+
return function($sniffer, $animator) {
307307
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
308+
$animator.enabled(true);
308309
};
309310
}));
310311

‎test/ng/directive/ngRepeatSpec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -554,8 +554,9 @@ describe('ngRepeat ngAnimate', function() {
554554

555555
beforeEach(module(function($animationProvider, $provide) {
556556
$provide.value('$window', window = angular.mock.createMockWindow());
557-
return function($sniffer) {
557+
return function($sniffer, $animator) {
558558
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
559+
$animator.enabled(true);
559560
};
560561
}));
561562

‎test/ng/directive/ngShowHideSpec.js

+16-7
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,12 @@ describe('ngShow / ngHide', function() {
4545
describe('ngShow / ngHide - ngAnimate', function() {
4646
var window;
4747
var vendorPrefix;
48-
var body, element;
48+
var body, element, $rootElement;
4949

5050
function html(html) {
51-
body.html(html);
52-
element = body.children().eq(0);
51+
body.append($rootElement);
52+
$rootElement.html(html);
53+
element = $rootElement.children().eq(0);
5354
return element;
5455
}
5556

@@ -61,12 +62,15 @@ describe('ngShow / ngHide - ngAnimate', function() {
6162
afterEach(function(){
6263
dealoc(body);
6364
dealoc(element);
65+
body.removeAttr('ng-animation-running');
6466
});
6567

6668
beforeEach(module(function($animationProvider, $provide) {
6769
$provide.value('$window', window = angular.mock.createMockWindow());
68-
return function($sniffer) {
70+
return function($sniffer, _$rootElement_, $animator) {
6971
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
72+
$rootElement = _$rootElement_;
73+
$animator.enabled(true);
7074
};
7175
}));
7276

@@ -111,18 +115,22 @@ describe('ngShow / ngHide - ngAnimate', function() {
111115
expect(element.attr('class')).not.toContain('custom-hide-setup');
112116
}));
113117

114-
it('should skip the initial show state on the first digest', function() {
118+
it('should skip animation if parent animation running', function() {
115119
var fired = false;
116-
inject(function($compile, $rootScope, $sniffer) {
120+
inject(function($animator, $compile, $rootScope, $sniffer) {
121+
$animator.enabled(true);
122+
$rootScope.$digest();
117123
$rootScope.val = true;
118124
var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope);
125+
$rootElement.controller('ngAnimate').running = true;
119126
element.css('display','none');
120127
expect(element.css('display')).toBe('none');
121128

122129
$rootScope.$digest();
123130
expect(element[0].style.display).toBe('');
124131
expect(fired).toBe(false);
125132

133+
$rootElement.controller('ngAnimate').running = false;
126134
$rootScope.val = false;
127135
$rootScope.$digest();
128136
if ($sniffer.supportsTransitions) {
@@ -178,7 +186,7 @@ describe('ngShow / ngHide - ngAnimate', function() {
178186
expect(element.attr('class')).not.toContain('custom-show-setup');
179187
}));
180188

181-
it('should skip the initial hide state on the first digest', function() {
189+
it('should disable animation when parent animation is running', function() {
182190
var fired = false;
183191
module(function($animationProvider) {
184192
$animationProvider.register('destructive-animation', function() {
@@ -193,6 +201,7 @@ describe('ngShow / ngHide - ngAnimate', function() {
193201
inject(function($compile, $rootScope) {
194202
$rootScope.val = false;
195203
var element = $compile(html('<div ng-hide="val" ng-animate="{ hide:\'destructive-animation\' }">123</div>'))($rootScope);
204+
$rootElement.controller('ngAnimate').running = true;
196205
element.css('display','block');
197206
expect(element.css('display')).toBe('block');
198207

‎test/ng/directive/ngSwitchSpec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -236,8 +236,9 @@ describe('ngSwitch ngAnimate', function() {
236236

237237
beforeEach(module(function($animationProvider, $provide) {
238238
$provide.value('$window', window = angular.mock.createMockWindow());
239-
return function($sniffer) {
239+
return function($sniffer, $animator) {
240240
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
241+
$animator.enabled(true);
241242
};
242243
}));
243244

‎test/ng/directive/ngViewSpec.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ describe('ngView', function() {
44
var element;
55

66
beforeEach(module(function() {
7-
return function($rootScope, $compile) {
7+
return function($rootScope, $compile, $animator) {
88
element = $compile('<ng:view onload="load()"></ng:view>')($rootScope);
9+
$animator.enabled(true);
910
};
1011
}));
1112

@@ -510,8 +511,9 @@ describe('ngAnimate', function() {
510511
beforeEach(module(function($provide, $routeProvider) {
511512
$provide.value('$window', window = angular.mock.createMockWindow());
512513
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
513-
return function($templateCache) {
514+
return function($templateCache, $animator) {
514515
$templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
516+
$animator.enabled(true);
515517
}
516518
}));
517519

@@ -579,8 +581,8 @@ describe('ngAnimate', function() {
579581
element = $compile(html(
580582
'<div ' +
581583
'ng-view ' +
582-
'ng-animate="{enter: \'customEnter\', animateFirst: false}">' +
583-
'</div>'
584+
'ng-animate="{enter: \'customEnter\'}">' +
585+
'</div>'
584586
))($rootScope);
585587

586588
$location.path('/foo');

‎test/testabilityPatch.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,17 @@ beforeEach(function() {
2424

2525
// reset to jQuery or default to us.
2626
bindJQuery();
27-
jqLite(document.body).html('');
27+
jqLite(document.body).html('').removeData();
2828
});
2929

3030
afterEach(function() {
3131
if (this.$injector) {
3232
var $rootScope = this.$injector.get('$rootScope');
33+
var $rootElement = this.$injector.get('$rootElement');
3334
var $log = this.$injector.get('$log');
3435
// release the injector
3536
dealoc($rootScope);
37+
dealoc($rootElement);
3638

3739
// check $log mock
3840
$log.assertEmpty && $log.assertEmpty();

0 commit comments

Comments
 (0)