Skip to content

Commit

Permalink
fix(animations): restore auto-style support for removed DOM nodes (#1…
Browse files Browse the repository at this point in the history 
…8787)

PR Close #18787
  • Loading branch information
@matsko @mhevery
matsko authored and mhevery committed Aug 19, 2017
1 parent 29aa8b3 commit 7062811
Show file tree
Hide file tree
Showing 3 changed files with 253 additions and 50 deletions.
56 changes: 49 additions & 7 deletions packages/animations/browser/src/render/transition_animation_engine.ts
View file
Expand Up @@ -967,15 +967,38 @@ export class TransitionAnimationEngine {
});
});

// this is a special case for nodes that will be removed (either by)
// having their own leave animations or by being queried in a container
// that will be removed once a parent animation is complete. The idea
// here is that * styles must be identical to ! styles because of
// backwards compatibility (* is also filled in by default in many places).
// Otherwise * styles will return an empty value or auto since the element
// that is being getComputedStyle'd will not be visible (since * = destination)
const replaceNodes = allLeaveNodes.filter(node => {
return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
});

// POST STAGE: fill the * styles
const [postStylesMap, allLeaveQueriedNodes] = cloakAndComputeStyles(
this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);

allLeaveQueriedNodes.forEach(node => {
if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) {
replaceNodes.push(node);
}
});

// PRE STAGE: fill the ! styles
const preStylesMap = allPreStyleElements.size ?
const [preStylesMap] = allPreStyleElements.size ?
cloakAndComputeStyles(
this.driver, enterNodesWithoutAnimations, allPreStyleElements, PRE_STYLE) :
new Map<any, ɵStyleData>();
[new Map<any, ɵStyleData>()];

// POST STAGE: fill the * styles
const postStylesMap = cloakAndComputeStyles(
this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);
replaceNodes.forEach(node => {
const post = postStylesMap.get(node);
const pre = preStylesMap.get(node);
postStylesMap.set(node, { ...post, ...pre } as any);
});

const rootPlayers: TransitionAnimationPlayer[] = [];
const subPlayers: TransitionAnimationPlayer[] = [];
Expand Down Expand Up @@ -1413,9 +1436,10 @@ function cloakElement(element: any, value?: string) {

function cloakAndComputeStyles(
driver: AnimationDriver, elements: any[], elementPropsMap: Map<any, Set<string>>,
defaultStyle: string): Map<any, ɵStyleData> {
defaultStyle: string): [Map<any, ɵStyleData>, any[]] {
const cloakVals = elements.map(element => cloakElement(element));
const valuesMap = new Map<any, ɵStyleData>();
const failedElements: any[] = [];

elementPropsMap.forEach((props: Set<string>, element: any) => {
const styles: ɵStyleData = {};
Expand All @@ -1426,13 +1450,14 @@ function cloakAndComputeStyles(
// by a parent animation element being detached.
if (!value || value.length == 0) {
element[REMOVAL_FLAG] = NULL_REMOVED_QUERIED_STATE;
failedElements.push(element);
}
});
valuesMap.set(element, styles);
});

elements.forEach((element, i) => cloakElement(element, cloakVals[i]));
return valuesMap;
return [valuesMap, failedElements];
}

/*
Expand Down Expand Up @@ -1539,3 +1564,20 @@ function objEquals(a: {[key: string]: any}, b: {[key: string]: any}): boolean {
}
return true;
}

function replacePostStylesAsPre(
element: any, allPreStyleElements: Map<any, Set<string>>,
allPostStyleElements: Map<any, Set<string>>): boolean {
const postEntry = allPostStyleElements.get(element);
if (!postEntry) return false;

let preEntry = allPreStyleElements.get(element);
if (preEntry) {
postEntry.forEach(data => preEntry !.add(data));
} else {
allPreStyleElements.set(element, postEntry);
}

allPostStyleElements.delete(element);
return true;
}
84 changes: 43 additions & 41 deletions packages/core/test/animation/animation_integration_spec.ts
View file
Expand Up @@ -1087,59 +1087,61 @@ export function main() {
.toBeTruthy();
});

it('should animate removals of nodes to the `void` state for each animation trigger', () => {
@Component({
selector: 'ani-cmp',
template: `
it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles',
() => {
@Component({
selector: 'ani-cmp',
template: `
<div *ngIf="exp" class="ng-if" [@trig1]="exp2" @trig2></div>
`,
animations: [
trigger('trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
]
})
class Cmp {
public exp = true;
public exp2 = 'state';
}
animations: [
trigger(
'trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
]
})
class Cmp {
public exp = true;
public exp2 = 'state';
}

TestBed.configureTestingModule({declarations: [Cmp]});
TestBed.configureTestingModule({declarations: [Cmp]});

const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.exp = true;
fixture.detectChanges();
engine.flush();
resetLog();
const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.exp = true;
fixture.detectChanges();
engine.flush();
resetLog();

const element = getDOM().querySelector(fixture.nativeElement, '.ng-if');
assertHasParent(element, true);
const element = getDOM().querySelector(fixture.nativeElement, '.ng-if');
assertHasParent(element, true);

cmp.exp = false;
fixture.detectChanges();
engine.flush();
cmp.exp = false;
fixture.detectChanges();
engine.flush();

assertHasParent(element, true);
assertHasParent(element, true);

expect(getLog().length).toEqual(2);
expect(getLog().length).toEqual(2);

const player2 = getLog().pop() !;
const player1 = getLog().pop() !;
const player2 = getLog().pop() !;
const player1 = getLog().pop() !;

expect(player2.keyframes).toEqual([
{width: AUTO_STYLE, offset: 0},
{width: '0px', offset: 1},
]);
expect(player2.keyframes).toEqual([
{width: PRE_STYLE, offset: 0},
{width: '0px', offset: 1},
]);

expect(player1.keyframes).toEqual([
{opacity: AUTO_STYLE, offset: 0}, {opacity: '0', offset: 1}
]);
expect(player1.keyframes).toEqual([
{opacity: PRE_STYLE, offset: 0}, {opacity: '0', offset: 1}
]);

player2.finish();
player1.finish();
assertHasParent(element, false);
});
player2.finish();
player1.finish();
assertHasParent(element, false);
});

it('should properly cancel all existing animations when a removal occurs', () => {
@Component({
Expand Down
163 changes: 161 additions & 2 deletions packages/core/test/animation/animations_with_web_animations_integration_spec.ts
View file
Expand Up @@ -5,8 +5,9 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {animate, query, state, style, transition, trigger} from '@angular/animations';
import {animate, group, query, state, style, transition, trigger} from '@angular/animations';
import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵsupportsWebAnimations} from '@angular/animations/browser';
import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
import {Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
Expand Down Expand Up @@ -127,7 +128,7 @@ export function main() {
template: `
<div [@myAnimation]="exp" #parent>
<div *ngFor="let item of items" class="child" style="line-height:20px">
- {{ item }}
- {{ item }}
</div>
</div>
`,
Expand Down Expand Up @@ -177,6 +178,164 @@ export function main() {
]);
});

it('should treat * styles as ! when a removal animation is being rendered', () => {
@Component({
selector: 'ani-cmp',
styles: [`
.box {
width: 500px;
overflow:hidden;
background:orange;
line-height:300px;
font-size:100px;
text-align:center;
}
`],
template: `
<button (click)="toggle()">Open / Close</button>
<hr />
<div *ngIf="exp" @slide class="box">
...
</div>
`,
animations: [trigger(
'slide',
[
state('void', style({height: '0px'})),
state('*', style({height: '*'})),
transition('* => *', animate('500ms')),
])]
})
class Cmp {
exp = false;

toggle() { this.exp = !this.exp; }
}

TestBed.configureTestingModule({declarations: [Cmp]});

const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;

cmp.exp = true;
fixture.detectChanges();

let player = engine.players[0] !;
let webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
expect(webPlayer.keyframes).toEqual([
{height: '0px', offset: 0},
{height: '300px', offset: 1},
]);
player.finish();

cmp.exp = false;
fixture.detectChanges();

player = engine.players[0] !;
webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
expect(webPlayer.keyframes).toEqual([
{height: '300px', offset: 0},
{height: '0px', offset: 1},
]);
});

it('should treat * styles as ! for queried items that are collected in a container that is being removed',
() => {
@Component({
selector: 'my-app',
styles: [`
.list .outer {
overflow:hidden;
}
.list .inner {
line-height:50px;
}
`],
template: `
<button (click)="empty()">Empty</button>
<button (click)="middle()">Middle</button>
<button (click)="full()">Full</button>
<hr />
<div [@list]="exp" class="list">
<div *ngFor="let item of items" class="outer">
<div class="inner">
{{ item }}
</div>
</div>
</div>
`,
animations: [
trigger('list', [
transition(':enter', []),
transition('* => empty', [
query(':leave', [
animate(500, style({ height: '0px' }))
])
]),
transition('* => full', [
query(':enter', [
style({ height: '0px' }),
animate(500, style({ height: '*' }))
])
]),
])
]
})
class Cmp {
items: any[] = [];

get exp() { return this.items.length ? 'full' : 'empty'; }

empty() { this.items = []; }

full() { this.items = [0, 1, 2, 3, 4]; }
}

TestBed.configureTestingModule({declarations: [Cmp]});

const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;

cmp.empty();
fixture.detectChanges();
let player = engine.players[0] !as TransitionAnimationPlayer;
player.finish();

cmp.full();
fixture.detectChanges();

player = engine.players[0] !as TransitionAnimationPlayer;
let queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
expect(queriedPlayers.length).toEqual(5);

let i = 0;
for (i = 0; i < queriedPlayers.length; i++) {
let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
expect(player.keyframes).toEqual([
{height: '0px', offset: 0},
{height: '50px', offset: 1},
]);
player.finish();
}

cmp.empty();
fixture.detectChanges();

player = engine.players[0] !as TransitionAnimationPlayer;
queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
expect(queriedPlayers.length).toEqual(5);

for (i = 0; i < queriedPlayers.length; i++) {
let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
expect(player.keyframes).toEqual([
{height: '50px', offset: 0},
{height: '0px', offset: 1},
]);
}
});

it('should compute intermediate styles properly when an animation is cancelled', () => {
@Component({
selector: 'ani-cmp',
Expand Down

0 comments on commit 7062811

Please sign in to comment.