refactor(animations): use a const enum to avoid compilation side effects (#23402)
This patch is in response to #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 #23400 tracks it. Closes #23401 PR Close #23402
This commit is contained in:
		
							parent
							
								
									5a1ddee88c
								
							
						
					
					
						commit
						7be7abdebd
					
				| @ -15,12 +15,7 @@ const DEFAULT_FILL_MODE = 'forwards'; | |||||||
| const DEFAULT_EASING = 'linear'; | const DEFAULT_EASING = 'linear'; | ||||||
| const ANIMATION_END_EVENT = 'animationend'; | const ANIMATION_END_EVENT = 'animationend'; | ||||||
| 
 | 
 | ||||||
| export enum AnimatorControlState { | export const enum AnimatorControlState {INITIALIZED = 1, STARTED = 2, FINISHED = 3, DESTROYED = 4} | ||||||
|   INITIALIZED = 1, |  | ||||||
|   STARTED = 2, |  | ||||||
|   FINISHED = 3, |  | ||||||
|   DESTROYED = 4 |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| export class CssKeyframesPlayer implements AnimationPlayer { | export class CssKeyframesPlayer implements AnimationPlayer { | ||||||
|   private _onDoneFns: Function[] = []; |   private _onDoneFns: Function[] = []; | ||||||
| @ -34,7 +29,8 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
|   public readonly totalTime: number; |   public readonly totalTime: number; | ||||||
|   public readonly easing: string; |   public readonly easing: string; | ||||||
|   public currentSnapshot: {[key: string]: string} = {}; |   public currentSnapshot: {[key: string]: string} = {}; | ||||||
|   public state = 0; | 
 | ||||||
|  |   private _state: AnimatorControlState = 0; | ||||||
| 
 | 
 | ||||||
|   constructor( |   constructor( | ||||||
|       public readonly element: any, public readonly keyframes: {[key: string]: string | number}[], |       public readonly element: any, public readonly keyframes: {[key: string]: string | number}[], | ||||||
| @ -54,8 +50,8 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
| 
 | 
 | ||||||
|   destroy() { |   destroy() { | ||||||
|     this.init(); |     this.init(); | ||||||
|     if (this.state >= AnimatorControlState.DESTROYED) return; |     if (this._state >= AnimatorControlState.DESTROYED) return; | ||||||
|     this.state = AnimatorControlState.DESTROYED; |     this._state = AnimatorControlState.DESTROYED; | ||||||
|     this._styler.destroy(); |     this._styler.destroy(); | ||||||
|     this._flushStartFns(); |     this._flushStartFns(); | ||||||
|     this._flushDoneFns(); |     this._flushDoneFns(); | ||||||
| @ -75,8 +71,8 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
| 
 | 
 | ||||||
|   finish() { |   finish() { | ||||||
|     this.init(); |     this.init(); | ||||||
|     if (this.state >= AnimatorControlState.FINISHED) return; |     if (this._state >= AnimatorControlState.FINISHED) return; | ||||||
|     this.state = AnimatorControlState.FINISHED; |     this._state = AnimatorControlState.FINISHED; | ||||||
|     this._styler.finish(); |     this._styler.finish(); | ||||||
|     this._flushStartFns(); |     this._flushStartFns(); | ||||||
|     this._flushDoneFns(); |     this._flushDoneFns(); | ||||||
| @ -86,10 +82,10 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
| 
 | 
 | ||||||
|   getPosition(): number { return this._styler.getPosition(); } |   getPosition(): number { return this._styler.getPosition(); } | ||||||
| 
 | 
 | ||||||
|   hasStarted(): boolean { return this.state >= AnimatorControlState.STARTED; } |   hasStarted(): boolean { return this._state >= AnimatorControlState.STARTED; } | ||||||
|   init(): void { |   init(): void { | ||||||
|     if (this.state >= AnimatorControlState.INITIALIZED) return; |     if (this._state >= AnimatorControlState.INITIALIZED) return; | ||||||
|     this.state = AnimatorControlState.INITIALIZED; |     this._state = AnimatorControlState.INITIALIZED; | ||||||
|     const elm = this.element; |     const elm = this.element; | ||||||
|     this._styler.apply(); |     this._styler.apply(); | ||||||
|     if (this._delay) { |     if (this._delay) { | ||||||
| @ -101,7 +97,7 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
|     this.init(); |     this.init(); | ||||||
|     if (!this.hasStarted()) { |     if (!this.hasStarted()) { | ||||||
|       this._flushStartFns(); |       this._flushStartFns(); | ||||||
|       this.state = AnimatorControlState.STARTED; |       this._state = AnimatorControlState.STARTED; | ||||||
|     } |     } | ||||||
|     this._styler.resume(); |     this._styler.resume(); | ||||||
|   } |   } | ||||||
| @ -137,7 +133,7 @@ export class CssKeyframesPlayer implements AnimationPlayer { | |||||||
|     this.init(); |     this.init(); | ||||||
|     const styles: {[key: string]: string} = {}; |     const styles: {[key: string]: string} = {}; | ||||||
|     if (this.hasStarted()) { |     if (this.hasStarted()) { | ||||||
|       const finished = this.state >= AnimatorControlState.FINISHED; |       const finished = this._state >= AnimatorControlState.FINISHED; | ||||||
|       Object.keys(this._finalStyles).forEach(prop => { |       Object.keys(this._finalStyles).forEach(prop => { | ||||||
|         if (prop != 'offset') { |         if (prop != 'offset') { | ||||||
|           styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop); |           styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop); | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user