Skip to content

Commit

Permalink
fix(platform-browser): update started state on reset
Browse files Browse the repository at this point in the history
This commit fixes the state of variable _started on call of reset method.

Earlier behaviour was on call of `reset()` method we are not setting back
`_started` flag's value to false and it created various issue for end user
which were expecting this behaviour as per name of method.

We provided end user `reset()` method, but it was empty method and on call
of it wasn't doing anything. As end user/developer were not able to
reuse animation not animation after call of reset method.

In this PR on call of `reset()` method we are setting flag `_started` value to false
which can be accessed by `hasStarted()`.

Resolves #18140
  • Loading branch information
iRealNirmal committed May 10, 2021
1 parent 55d9713 commit 2638277
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 2 deletions.
1 change: 1 addition & 0 deletions goldens/public-api/animations/browser/testing/testing.d.ts
Expand Up @@ -31,4 +31,5 @@ export declare class MockAnimationPlayer extends NoopAnimationPlayer {
finish(): void;
hasStarted(): boolean;
play(): void;
reset(): void;
}
Expand Up @@ -15,6 +15,7 @@ const DEFAULT_FILL_MODE = 'forwards';
const DEFAULT_EASING = 'linear';

export const enum AnimatorControlState {
RESET = 0,
INITIALIZED = 1,
STARTED = 2,
FINISHED = 3,
Expand All @@ -26,7 +27,6 @@ export class CssKeyframesPlayer implements AnimationPlayer {
private _onStartFns: Function[] = [];
private _onDestroyFns: Function[] = [];

private _started = false;
// TODO(issue/24571): remove '!'.
private _styler!: ElementAnimationStyleHandler;

Expand Down Expand Up @@ -139,6 +139,7 @@ export class CssKeyframesPlayer implements AnimationPlayer {
this.play();
}
reset(): void {
this._state = AnimatorControlState.RESET;
this._styler.destroy();
this._buildStyler();
this._styler.apply();
Expand Down
Expand Up @@ -83,6 +83,11 @@ export class MockAnimationPlayer extends NoopAnimationPlayer {
this._onInitFns = [];
}

reset() {
super.reset();
this.__started = false;
}

finish(): void {
super.finish();
this.__finished = true;
Expand Down
4 changes: 3 additions & 1 deletion packages/animations/src/players/animation_player.ts
Expand Up @@ -184,7 +184,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
this._onDestroyFns = [];
}
}
reset(): void {}
reset(): void {
this._started = false;
}
setPosition(position: number): void {
this._position = this.totalTime ? position * this.totalTime : 1;
}
Expand Down
Expand Up @@ -104,6 +104,7 @@ export class RendererAnimationPlayer implements AnimationPlayer {

reset(): void {
this._command('reset');
this._started = false;
}

setPosition(p: number): void {
Expand Down
Expand Up @@ -104,5 +104,43 @@ import {el} from '../../testing/src/browser_util';
expect(finished).toBeTruthy();
expect(destroyed).toBeTruthy();
}));

it('should update `hasStarted()` on `play()` and `reset()`', fakeAsync(() => {
@Component({
selector: 'ani-another-cmp',
template: '...',
})
class CmpAnother {
@ViewChild('target') public target: any;

constructor(public builder: AnimationBuilder) {}

build() {
const definition =
this.builder.build([style({opacity: 0}), animate(1000, style({opacity: 1}))]);

return definition.create(this.target);
}
}

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

const fixture = TestBed.createComponent(CmpAnother);
const cmp = fixture.componentInstance;
fixture.detectChanges();

const player = cmp.build();

expect(player.hasStarted()).toBeFalsy();
flushMicrotasks();

player.play();
flushMicrotasks();
expect(player.hasStarted()).toBeTruthy();

player.reset();
flushMicrotasks();
expect(player.hasStarted()).toBeFalsy();
}));
});
}

0 comments on commit 2638277

Please sign in to comment.