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

Commit

Permalink
fix(ngAnimate): prevent animation on initial page load
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhevery
mhevery committed Apr 12, 2013
1 parent 3c3247f commit 570463a
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 228 deletions.
400 changes: 196 additions & 204 deletions src/ng/animator.js
View file

Large diffs are not rendered by default.

44 changes: 35 additions & 9 deletions test/ng/animatorSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

describe("$animator", function() {

var body, element;
var body, element, $rootElement;

function html(html) {
body.html(html);
element = body.children().eq(0);
body.append($rootElement);
$rootElement.html(html);
element = $rootElement.children().eq(0);
return element;
}

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

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

it("should disable and enable the animations", inject(function($animator) {
beforeEach(function() {
module(function($animationProvider, $provide) {
$provide.value('$window', angular.mock.createMockWindow());
});
});

it("should disable and enable the animations", inject(function($animator, $rootScope, $window) {
expect($animator.enabled()).toBe(false);

$rootScope.$digest();
$window.setTimeout.expect(0).process();

expect($animator.enabled()).toBe(true);

expect($animator.enabled(0)).toBe(false);
Expand All @@ -40,9 +52,10 @@ describe("$animator", function() {
module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
})
inject(function($animator, $compile, $rootScope) {
inject(function($animator, $compile, $rootScope, _$rootElement_) {
animator = $animator($rootScope, {});
element = $compile('<div></div>')($rootScope);
$rootElement = _$rootElement_;
})
});

Expand Down Expand Up @@ -131,7 +144,10 @@ describe("$animator", function() {
animator = $animator($rootScope, {
ngAnimate : '{enter: \'custom\'}'
});

$rootScope.$digest(); // re-enable the animations;
window.setTimeout.expect(0).process();

expect(element.contents().length).toBe(0);
animator.enter(child, element);
window.setTimeout.expect(1).process();
Expand All @@ -141,7 +157,10 @@ describe("$animator", function() {
animator = $animator($rootScope, {
ngAnimate : '{leave: \'custom\'}'
});
$rootScope.$digest();

$rootScope.$digest(); // re-enable the animations;
window.setTimeout.expect(0).process();

element.append(child);
expect(element.contents().length).toBe(1);
animator.leave(child, element);
Expand All @@ -150,6 +169,7 @@ describe("$animator", function() {
}));

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

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

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

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

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

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

animator = $animator($rootScope, {
Expand All @@ -274,8 +300,10 @@ describe("$animator", function() {
beforeEach(function() {
module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
return function($sniffer) {
return function($sniffer, _$rootElement_, $animator) {
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
$rootElement = _$rootElement_;
$animator.enabled(true);
};
})
});
Expand All @@ -288,8 +316,6 @@ describe("$animator", function() {
ngAnimate : '{show: \'inline-show\'}'
});

$rootScope.$digest(); // skip no-animate on first digest.

element.css('display','none');
expect(element.css('display')).toBe('none');
animator.show(element);
Expand Down
3 changes: 2 additions & 1 deletion test/ng/directive/ngIncludeSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,8 +303,9 @@ describe('ngInclude ngAnimate', function() {

beforeEach(module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
return function($sniffer) {
return function($sniffer, $animator) {
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
$animator.enabled(true);
};
}));

Expand Down
3 changes: 2 additions & 1 deletion test/ng/directive/ngRepeatSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -554,8 +554,9 @@ describe('ngRepeat ngAnimate', function() {

beforeEach(module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
return function($sniffer) {
return function($sniffer, $animator) {
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
$animator.enabled(true);
};
}));

Expand Down
23 changes: 16 additions & 7 deletions test/ng/directive/ngShowHideSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ describe('ngShow / ngHide', function() {
describe('ngShow / ngHide - ngAnimate', function() {
var window;
var vendorPrefix;
var body, element;
var body, element, $rootElement;

function html(html) {
body.html(html);
element = body.children().eq(0);
body.append($rootElement);
$rootElement.html(html);
element = $rootElement.children().eq(0);
return element;
}

Expand All @@ -61,12 +62,15 @@ describe('ngShow / ngHide - ngAnimate', function() {
afterEach(function(){
dealoc(body);
dealoc(element);
body.removeAttr('ng-animation-running');
});

beforeEach(module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
return function($sniffer) {
return function($sniffer, _$rootElement_, $animator) {
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
$rootElement = _$rootElement_;
$animator.enabled(true);
};
}));

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

it('should skip the initial show state on the first digest', function() {
it('should skip animation if parent animation running', function() {
var fired = false;
inject(function($compile, $rootScope, $sniffer) {
inject(function($animator, $compile, $rootScope, $sniffer) {
$animator.enabled(true);
$rootScope.$digest();
$rootScope.val = true;
var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope);
$rootElement.controller('ngAnimate').running = true;
element.css('display','none');
expect(element.css('display')).toBe('none');

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

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

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

Expand Down
3 changes: 2 additions & 1 deletion test/ng/directive/ngSwitchSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,8 +236,9 @@ describe('ngSwitch ngAnimate', function() {

beforeEach(module(function($animationProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
return function($sniffer) {
return function($sniffer, $animator) {
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
$animator.enabled(true);
};
}));

Expand Down
10 changes: 6 additions & 4 deletions test/ng/directive/ngViewSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ describe('ngView', function() {
var element;

beforeEach(module(function() {
return function($rootScope, $compile) {
return function($rootScope, $compile, $animator) {
element = $compile('<ng:view onload="load()"></ng:view>')($rootScope);
$animator.enabled(true);
};
}));

Expand Down Expand Up @@ -510,8 +511,9 @@ describe('ngAnimate', function() {
beforeEach(module(function($provide, $routeProvider) {
$provide.value('$window', window = angular.mock.createMockWindow());
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
return function($templateCache) {
return function($templateCache, $animator) {
$templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
$animator.enabled(true);
}
}));

Expand Down Expand Up @@ -579,8 +581,8 @@ describe('ngAnimate', function() {
element = $compile(html(
'<div ' +
'ng-view ' +
'ng-animate="{enter: \'customEnter\', animateFirst: false}">' +
'</div>'
'ng-animate="{enter: \'customEnter\'}">' +
'</div>'
))($rootScope);

$location.path('/foo');
Expand Down
4 changes: 3 additions & 1 deletion test/testabilityPatch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,17 @@ beforeEach(function() {

// reset to jQuery or default to us.
bindJQuery();
jqLite(document.body).html('');
jqLite(document.body).html('').removeData();
});

afterEach(function() {
if (this.$injector) {
var $rootScope = this.$injector.get('$rootScope');
var $rootElement = this.$injector.get('$rootElement');
var $log = this.$injector.get('$log');
// release the injector
dealoc($rootScope);
dealoc($rootElement);

// check $log mock
$log.assertEmpty && $log.assertEmpty();
Expand Down

0 comments on commit 570463a

Please sign in to comment.