honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(animations): retain state styling for nodes that are moved around (#23534) 

PR Close #23534
This commit is contained in:
Matias Niemelä 2018-04-24 14:28:18 -07:00 committed by Igor Minar
parent da9ff255dd
commit 65211f46cf
2 changed files with 132 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/animations/browser/src/render/transition_animation_engine.ts
View File

@ -28,13 +28,15 @@ const STAR_SELECTOR = '.ng-star-inserted';
const EMPTY_PLAYER_ARRAY: TransitionAnimationPlayer[] = [];
const NULL_REMOVAL_STATE: ElementAnimationState = {
namespaceId: '',
setForRemoval: null,
setForRemoval: false,
setForMove: false,
hasAnimation: false,
removedBeforeQueried: false
};
const NULL_REMOVED_QUERIED_STATE: ElementAnimationState = {
namespaceId: '',
setForRemoval: null,
setForMove: false,
setForRemoval: false,
hasAnimation: false,
removedBeforeQueried: true
};
@ -58,7 +60,8 @@ export interface QueueInstruction {
export const REMOVAL_FLAG = '__ng_removed';
export interface ElementAnimationState {
setForRemoval: any;
setForRemoval: boolean;
setForMove: boolean;
hasAnimation: boolean;
namespaceId: string;
removedBeforeQueried: boolean;
@ -660,6 +663,11 @@ export class TransitionAnimationEngine {
const details = element[REMOVAL_FLAG] as ElementAnimationState;
if (details && details.setForRemoval) {
details.setForRemoval = false;
details.setForMove = true;
const index = this.collectedLeaveElements.indexOf(element);
if (index >= 0) {
this.collectedLeaveElements.splice(index, 1);
}
}
// in the event that the namespaceId is blank then the caller
@ -946,9 +954,18 @@ export class TransitionAnimationEngine {
const ns = this._namespaceList[i];
ns.drainQueuedTransitions(microtaskId).forEach(entry => {
const player = entry.player;
const element = entry.element;
allPlayers.push(player);
const element = entry.element;
if (this.collectedEnterElements.length) {
const details = element[REMOVAL_FLAG] as ElementAnimationState;
// move animations are currently not supported...
if (details && details.setForMove) {
player.destroy();
return;
}
}
if (!bodyNode || !this.driver.containsElement(bodyNode, element)) {
player.destroy();
return;

111
packages/core/test/animation/animation_integration_spec.ts
View File

@ -1453,6 +1453,117 @@ const DEFAULT_COMPONENT_ID = '1';
.toBeTruthy();
});
it('should retain state styles when the underlying DOM structure changes even if there are no insert/remove animations',
() => {
@Component({
selector: 'ani-cmp',
template: `
<div class="item" *ngFor="let item of items" [@color]="colorExp">
{{ item }}
</div>
`,
animations: [trigger('color', [state('green', style({backgroundColor: 'green'}))])]
})
class Cmp {
public colorExp = 'green';
public items = [0, 1, 2, 3];
reorder() {
const temp = this.items[0];
this.items[0] = this.items[1];
this.items[1] = temp;
}
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
fixture.detectChanges();
let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
assertBackgroundColor(elements[0], 'green');
assertBackgroundColor(elements[1], 'green');
assertBackgroundColor(elements[2], 'green');
assertBackgroundColor(elements[3], 'green');
elements[0].title = '0a';
elements[1].title = '1a';
cmp.reorder();
fixture.detectChanges();
elements = fixture.nativeElement.querySelectorAll('.item');
assertBackgroundColor(elements[0], 'green');
assertBackgroundColor(elements[1], 'green');
assertBackgroundColor(elements[2], 'green');
assertBackgroundColor(elements[3], 'green');
function assertBackgroundColor(element: HTMLElement, color: string) {
expect(element.style.getPropertyValue('background-color')).toEqual(color);
}
});
it('should retain state styles when the underlying DOM structure changes even if there are insert/remove animations',
() => {
@Component({
selector: 'ani-cmp',
template: `
<div class="item" *ngFor="let item of items" [@color]="colorExp">
{{ item }}
</div>
`,
animations: [trigger(
'color',
[
transition('* => *', animate(500)),
state('green', style({backgroundColor: 'green'}))
])]
})
class Cmp {
public colorExp = 'green';
public items = [0, 1, 2, 3];
reorder() {
const temp = this.items[0];
this.items[0] = this.items[1];
this.items[1] = temp;
}
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
fixture.detectChanges();
getLog().forEach(p => p.finish());
let elements: HTMLElement[] = fixture.nativeElement.querySelectorAll('.item');
assertBackgroundColor(elements[0], 'green');
assertBackgroundColor(elements[1], 'green');
assertBackgroundColor(elements[2], 'green');
assertBackgroundColor(elements[3], 'green');
elements[0].title = '0a';
elements[1].title = '1a';
cmp.reorder();
fixture.detectChanges();
getLog().forEach(p => p.finish());
elements = fixture.nativeElement.querySelectorAll('.item');
assertBackgroundColor(elements[0], 'green');
assertBackgroundColor(elements[1], 'green');
assertBackgroundColor(elements[2], 'green');
assertBackgroundColor(elements[3], 'green');
function assertBackgroundColor(element: HTMLElement, color: string) {
expect(element.style.getPropertyValue('background-color')).toEqual(color);
}
});
it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles',
() => {
@Component({