cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): ensure empty animate() steps work at the end of a sequence (#15328)

Browse Source 
Closes #15310
Closes #15328

PR Close #15328
This commit is contained in:
Matias Niemelä
2017-03-20 16:31:55 -07:00
committed by Miško Hevery
parent 1e8b132ade
commit fbccd5cd38
2 changed files with 133 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -508,6 +508,81 @@ export function main() {
expect(p3.previousStyles).toEqual({});
});
it('should properly balance styles between states even if there are no destination state styles',
() => {
@Component({
selector: 'ani-cmp',
template: `
<div @myAnimation *ngIf="exp"></div>
`,
animations: [trigger(
'myAnimation',
[
state('void', style({opacity: 0, width: '0px', height: '0px'})),
transition(':enter', animate(1000))
])]
})
class Cmp {
exp: boolean = false;
}
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();
const [p1] = getLog();
expect(p1.keyframes).toEqual([
{opacity: '0', width: '0px', height: '0px', offset: 0},
{opacity: AUTO_STYLE, width: AUTO_STYLE, height: AUTO_STYLE, offset: 1}
]);
});
it('should not apply the destination styles if the final animate step already contains styles',
() => {
@Component({
selector: 'ani-cmp',
template: `
<div @myAnimation *ngIf="exp"></div>
`,
animations: [trigger(
'myAnimation',
[
state('void', style({color: 'red'})), state('*', style({color: 'blue'})),
transition(
':enter',
[style({fontSize: '0px '}), animate(1000, style({fontSize: '100px'}))])
])]
})
class Cmp {
exp: boolean = false;
}
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();
const players = getLog();
expect(players.length).toEqual(1);
// notice how the final color is NOT blue
expect(players[0].keyframes).toEqual([
{fontSize: '0px', color: 'red', offset: 0},
{fontSize: '100px', color: 'red', offset: 1}
]);
});
it('should invoke an animation trigger that is state-less', () => {
@Component({
selector: 'ani-cmp',