Skip to content

Commit

Permalink
refactor(animations): use a const enum to avoid compilation side effects
Browse files Browse the repository at this point in the history
This patch is in response to angular#23401 where a non-const enum was being
compiled as an empty object when used in an animation player when
`ng build --prod` was being processed. This patch is a immediate fix
for the issue and angular#23400 tracks it.

Closes angular#23401
  • Loading branch information
matsko committed Apr 17, 2018
1 parent c3280b2 commit ce36d1f
Showing 1 changed file with 12 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,7 @@ const DEFAULT_FILL_MODE = 'forwards';
const DEFAULT_EASING = 'linear';
const ANIMATION_END_EVENT = 'animationend';

export enum AnimatorControlState {
INITIALIZED = 1,
STARTED = 2,
FINISHED = 3,
DESTROYED = 4
}
export const enum AnimatorControlState {INITIALIZED = 1, STARTED = 2, FINISHED = 3, DESTROYED = 4}

export class CssKeyframesPlayer implements AnimationPlayer {
private _onDoneFns: Function[] = [];
Expand All @@ -34,7 +29,8 @@ export class CssKeyframesPlayer implements AnimationPlayer {
public readonly totalTime: number;
public readonly easing: string;
public currentSnapshot: {[key: string]: string} = {};
public state = 0;

private _state: AnimatorControlState = 0;

constructor(
public readonly element: any, public readonly keyframes: {[key: string]: string | number}[],
Expand All @@ -54,8 +50,8 @@ export class CssKeyframesPlayer implements AnimationPlayer {

destroy() {
this.init();
if (this.state >= AnimatorControlState.DESTROYED) return;
this.state = AnimatorControlState.DESTROYED;
if (this._state >= AnimatorControlState.DESTROYED) return;
this._state = AnimatorControlState.DESTROYED;
this._styler.destroy();
this._flushStartFns();
this._flushDoneFns();
Expand All @@ -75,8 +71,8 @@ export class CssKeyframesPlayer implements AnimationPlayer {

finish() {
this.init();
if (this.state >= AnimatorControlState.FINISHED) return;
this.state = AnimatorControlState.FINISHED;
if (this._state >= AnimatorControlState.FINISHED) return;
this._state = AnimatorControlState.FINISHED;
this._styler.finish();
this._flushStartFns();
this._flushDoneFns();
Expand All @@ -86,10 +82,10 @@ export class CssKeyframesPlayer implements AnimationPlayer {

getPosition(): number { return this._styler.getPosition(); }

hasStarted(): boolean { return this.state >= AnimatorControlState.STARTED; }
hasStarted(): boolean { return this._state >= AnimatorControlState.STARTED; }
init(): void {
if (this.state >= AnimatorControlState.INITIALIZED) return;
this.state = AnimatorControlState.INITIALIZED;
if (this._state >= AnimatorControlState.INITIALIZED) return;
this._state = AnimatorControlState.INITIALIZED;
const elm = this.element;
this._styler.apply();
if (this._delay) {
Expand All @@ -101,7 +97,7 @@ export class CssKeyframesPlayer implements AnimationPlayer {
this.init();
if (!this.hasStarted()) {
this._flushStartFns();
this.state = AnimatorControlState.STARTED;
this._state = AnimatorControlState.STARTED;
}
this._styler.resume();
}
Expand Down Expand Up @@ -137,7 +133,7 @@ export class CssKeyframesPlayer implements AnimationPlayer {
this.init();
const styles: {[key: string]: string} = {};
if (this.hasStarted()) {
const finished = this.state >= AnimatorControlState.FINISHED;
const finished = this._state >= AnimatorControlState.FINISHED;
Object.keys(this._finalStyles).forEach(prop => {
if (prop != 'offset') {
styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop);
Expand Down

0 comments on commit ce36d1f

Please sign in to comment.