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

Commit

Permalink
fix($animate): ensure structural animations skip all child animations…
Browse files Browse the repository at this point in the history 
… even if no animation is present during compile

Closes #3215
  • Loading branch information
@matsko @mhevery
matsko authored and mhevery committed Oct 11, 2013
1 parent 23c6988 commit cc58460
Show file tree
Hide file tree
Showing 2 changed files with 223 additions and 22 deletions.
75 changes: 56 additions & 19 deletions src/ngAnimate/animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,7 @@ angular.module('ngAnimate', ['ng'])
* @param {function()=} done callback function that will be called once the animation is complete
*/
enter : function(element, parent, after, done) {
this.enabled(false, element);
$delegate.enter(element, parent, after);
$rootScope.$$postDigest(function() {
performAnimation('enter', 'ng-enter', element, parent, after, function() {
Expand Down Expand Up @@ -322,6 +323,7 @@ angular.module('ngAnimate', ['ng'])
*/
leave : function(element, done) {
cancelChildAnimations(element);
this.enabled(false, element);
$rootScope.$$postDigest(function() {
performAnimation('leave', 'ng-leave', element, null, null, function() {
$delegate.leave(element, done);
Expand Down Expand Up @@ -361,6 +363,7 @@ angular.module('ngAnimate', ['ng'])
*/
move : function(element, parent, after, done) {
cancelChildAnimations(element);
this.enabled(false, element);
$delegate.move(element, parent, after);
$rootScope.$$postDigest(function() {
performAnimation('move', 'ng-move', element, null, null, function() {
Expand Down Expand Up @@ -451,12 +454,30 @@ angular.module('ngAnimate', ['ng'])
* Globally enables/disables animations.
*
*/
enabled : function(value) {
if (arguments.length) {
rootAnimateState.running = !value;
enabled : function(value, element) {
switch(arguments.length) {
case 2:
if(value) {
cleanup(element);
}
else {
var data = element.data(NG_ANIMATE_STATE) || {};
data.structural = true;
data.running = true;
element.data(NG_ANIMATE_STATE, data);
}
break;

case 1:
rootAnimateState.running = !value;
break;

default:
value = !rootAnimateState.running
break;
}
return !rootAnimateState.running;
}
return !!value;
}
};

/*
Expand Down Expand Up @@ -484,24 +505,29 @@ angular.module('ngAnimate', ['ng'])
//skip the animation if animations are disabled, a parent is already being animated
//or the element is not currently attached to the document body.
if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running || animations.length == 0) {
//avoid calling done() since there is no need to remove any
//data or className values since this happens earlier than that
//and also use a timeout so that it won't be asynchronous
onComplete && onComplete();
done();
return;
}

var ngAnimateState = element.data(NG_ANIMATE_STATE) || {};

//if an animation is currently running on the element then lets take the steps
//to cancel that animation and fire any required callbacks
var isClassBased = event == 'addClass' || event == 'removeClass';
if(ngAnimateState.running) {
if(isClassBased && ngAnimateState.structural) {
onComplete && onComplete();
return;
}

//if an animation is currently running on the element then lets take the steps
//to cancel that animation and fire any required callbacks
$timeout.cancel(ngAnimateState.flagTimer);
cancelAnimations(ngAnimateState.animations);
ngAnimateState.done();
(ngAnimateState.done || noop)();
}

element.data(NG_ANIMATE_STATE, {
running:true,
structural:!isClassBased,
animations:animations,
done:done
});
Expand All @@ -516,17 +542,14 @@ angular.module('ngAnimate', ['ng'])
};

if(animation.start) {
if(event == 'addClass' || event == 'removeClass') {
animation.endFn = animation.start(element, className, fn);
} else {
animation.endFn = animation.start(element, fn);
}
animation.endFn = isClassBased ?
animation.start(element, className, fn) :
animation.start(element, fn);
} else {
fn();
}
});


function progress(index) {
animations[index].done = true;
(animations[index].endFn || noop)();
Expand All @@ -539,7 +562,21 @@ angular.module('ngAnimate', ['ng'])
function done() {
if(!done.hasBeenRun) {
done.hasBeenRun = true;
cleanup(element);
var data = element.data(NG_ANIMATE_STATE);
if(data) {
/* only structural animations wait for reflow before removing an
animation, but class-based animations don't. An example of this
failing would be when a parent HTML tag has a ng-class attribute
causing ALL directives below to skip animations during the digest */
if(isClassBased) {
cleanup(element);
} else {
data.flagTimer = $timeout(function() {
cleanup(element);
}, 0, false);
element.data(NG_ANIMATE_STATE, data);
}
}
(onComplete || noop)();
}
}
Expand Down
170 changes: 167 additions & 3 deletions test/ngAnimate/animateSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe("ngAnimate", function() {

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

it("should disable and enable the animations", function() {
it("should work for all animations", function() {
var $animate, initialState = null;

angular.bootstrap(body, ['ngAnimate',function() {
Expand All @@ -56,7 +56,6 @@ describe("ngAnimate", function() {
expect($animate.enabled(1)).toBe(true);
expect($animate.enabled()).toBe(true);
});

});

describe("with polyfill", function() {
Expand Down Expand Up @@ -229,6 +228,7 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-enter');
expect(child.attr('class')).toContain('ng-enter-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 });
$timeout.flush();

//move
element.append(after);
Expand All @@ -239,6 +239,7 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-move');
expect(child.attr('class')).toContain('ng-move-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 });
$timeout.flush();

//hide
$animate.addClass(child, 'ng-hide');
Expand All @@ -261,6 +262,7 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-leave');
expect(child.attr('class')).toContain('ng-leave-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 });
$timeout.flush();
}));

it("should not run if animations are disabled",
Expand Down Expand Up @@ -330,6 +332,29 @@ describe("ngAnimate", function() {
expect(child.hasClass('animation-cancelled')).toBe(true);
}));

it("should skip a class-based animation if the same element already has an ongoing structural animation",
inject(function($animate, $rootScope, $sniffer, $timeout) {

var completed = false;
$animate.enter(child, element, null, function() {
completed = true;
});
$rootScope.$digest();

expect(completed).toBe(false);

$animate.addClass(child, 'green');
expect(element.hasClass('green'));

expect(completed).toBe(false);
if($sniffer.transitions) {
$timeout.flush();
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 });
}
$timeout.flush();

expect(completed).toBe(true);
}));

it("should fire the cancel/end function with the correct flag in the parameters",
inject(function($animate, $rootScope, $sniffer, $timeout) {
Expand Down Expand Up @@ -722,6 +747,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('ng-enter-active')).toBe(true);
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 22000, elapsedTime: 22000 });
}
$timeout.flush();
expect(element.hasClass('abc')).toBe(true);

$rootScope.klass = 'xyz';
Expand All @@ -735,6 +761,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('ng-enter-active')).toBe(true);
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11000 });
}
$timeout.flush();
expect(element.hasClass('xyz')).toBe(true);
}));

Expand Down Expand Up @@ -767,7 +794,8 @@ describe("ngAnimate", function() {
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3000 });
}

expect(element.hasClass('one two')).toBe(true);
expect(element.hasClass('one')).toBe(true);
expect(element.hasClass('two')).toBe(true);
}));
});

Expand Down Expand Up @@ -1670,6 +1698,7 @@ describe("ngAnimate", function() {

expect(animationState).toBe('enter-cancel');
$rootScope.$digest();
$timeout.flush();

$animate.addClass(child, 'something');
expect(animationState).toBe('addClass');
Expand Down Expand Up @@ -1711,4 +1740,139 @@ describe("ngAnimate", function() {
expect(element[0].querySelectorAll('.ng-enter-active').length).toBe(0);
}));


it("should work to disable all child animations for an element", function() {
var childAnimated = false,
containerAnimated = false;
module(function($animateProvider) {
$animateProvider.register('.child', function() {
return {
addClass : function(element, className, done) {
childAnimated = true;
done();
}
}
});
$animateProvider.register('.container', function() {
return {
leave : function(element, done) {
containerAnimated = true;
done();
}
}
});
});

inject(function($compile, $rootScope, $animate, $timeout, $rootElement) {
$animate.enabled(true);

var element = $compile('<div class="container"></div>')($rootScope);
jqLite($document[0].body).append($rootElement);
$rootElement.append(element);

var child = $compile('<div class="child"></div>')($rootScope);
element.append(child);

$animate.enabled(true, element);

$animate.addClass(child, 'awesome');
expect(childAnimated).toBe(true);

childAnimated = false;
$animate.enabled(false, element);

$animate.addClass(child, 'super');
expect(childAnimated).toBe(false);

$animate.leave(element);
$rootScope.$digest();
expect(containerAnimated).toBe(true);
});
});

it("should disable all child animations on structural animations until the first reflow has passed", function() {
var intercepted;
module(function($animateProvider) {
$animateProvider.register('.animated', function() {
return {
enter : ani('enter'),
leave : ani('leave'),
move : ani('move'),
addClass : ani('addClass'),
removeClass : ani('removeClass')
};

function ani(type) {
return function(element, className, done) {
intercepted = type;
(done || className)();
}
}
});
});

inject(function($animate, $rootScope, $sniffer, $timeout, $compile, _$rootElement_) {
$rootElement = _$rootElement_;

$animate.enabled(true);
$rootScope.$digest();

var element = $compile('<div class="element animated">...</div>')($rootScope);
var child1 = $compile('<div class="child1 animated">...</div>')($rootScope);
var child2 = $compile('<div class="child2 animated">...</div>')($rootScope);
var container = $compile('<div class="container">...</div>')($rootScope);

jqLite($document[0].body).append($rootElement);
$rootElement.append(container);
element.append(child1);
element.append(child2);

$animate.move(element, null, container);
$rootScope.$digest();

expect(intercepted).toBe('move');

$animate.addClass(child1, 'test');
expect(child1.hasClass('test')).toBe(true);

expect(intercepted).toBe('move');
$animate.leave(child1);
$rootScope.$digest();

expect(intercepted).toBe('move');

//reflow has passed
$timeout.flush();

$animate.leave(child2);
$rootScope.$digest();
expect(intercepted).toBe('leave');
});
});

it("should not disable any child animations when any parent class-based animations are run", function() {
var intercepted;
module(function($animateProvider) {
$animateProvider.register('.animated', function() {
return {
enter : function(element, done) {
intercepted = true;
done();
}
}
});
});

inject(function($animate, $rootScope, $sniffer, $timeout, $compile, $document, $rootElement) {
$animate.enabled(true);

var element = $compile('<div ng-class="{klass:bool}"> <div ng-if="bool" class="animated">value</div></div>')($rootScope);
$rootElement.append(element);
jqLite($document[0].body).append($rootElement);

$rootScope.bool = true;
$rootScope.$digest();
expect(intercepted).toBe(true);
});
});
});

0 comments on commit cc58460

Please sign in to comment.