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

Commit

Permalink
fix($animate): allow animations when pinned element is parent element
Browse files Browse the repository at this point in the history
Previously, the animate queue would only detect pinned elements when
they were the same element as the to-be-animated element.

Related #12617
Closes #13466
  • Loading branch information
Narretz committed Dec 10, 2015
1 parent 6428ed5 commit 8f0b482
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 16 deletions.
1 change: 1 addition & 0 deletions src/ngAnimate/animateQueue.js
Original file line number Diff line number Diff line change
Expand Up @@ -586,6 +586,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
if (parentHost) {
parentElement = parentHost;
rootElementDetected = true;
}
}
}
Expand Down
50 changes: 34 additions & 16 deletions test/ngAnimate/animateSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1448,28 +1448,46 @@ describe("animations", function() {
}));


it('should allow an element to be pinned elsewhere and still be available in animations',
inject(function($animate, $compile, $document, $rootElement, $rootScope) {
they('should animate an element inside a pinned element that is the $prop element',
['same', 'parent', 'grandparent'],
function(elementRelation) {
inject(function($animate, $compile, $document, $rootElement, $rootScope) {

var innerParent = jqLite('<div></div>');
jqLite($document[0].body).append(innerParent);
innerParent.append($rootElement);
var pinElement, animateElement;

var element = jqLite('<div></div>');
jqLite($document[0].body).append(element);
var innerParent = jqLite('<div></div>');
jqLite($document[0].body).append(innerParent);
innerParent.append($rootElement);

$animate.addClass(element, 'red');
$rootScope.$digest();
expect(capturedAnimation).toBeFalsy();
switch (elementRelation) {
case 'same':
pinElement = jqLite('<div id="animate"></div>');
break;
case 'parent':
pinElement = jqLite('<div><div id="animate"></div></div>');
break;
case 'grandparent':
pinElement = jqLite('<div><div><div id="animate"></div></div></div>');
break;
}

$animate.pin(element, $rootElement);
jqLite($document[0].body).append(pinElement);
animateElement = jqLite($document[0].getElementById('animate'));

$animate.addClass(element, 'blue');
$rootScope.$digest();
expect(capturedAnimation).toBeTruthy();
$animate.addClass(animateElement, 'red');
$rootScope.$digest();
expect(capturedAnimation).toBeFalsy();

dealoc(element);
}));
// Pin the element to the app root to enable animations
$animate.pin(pinElement, $rootElement);

$animate.addClass(animateElement, 'blue');
$rootScope.$digest();
expect(capturedAnimation).toBeTruthy();

dealoc(pinElement);
});
});

it('should adhere to the disabled state of the hosted parent when an element is pinned',
inject(function($animate, $compile, $document, $rootElement, $rootScope) {
Expand Down

0 comments on commit 8f0b482

Please sign in to comment.