refactor(animations): introduce @angular/animation module (#14351)

PR Close: #14351

modules/@angular/core/src/animation/animation_group_player.ts

@@ -16,6 +16,7 @@ export class AnimationGroupPlayer implements AnimationPlayer {
   private _finished = false;
   private _started = false;
   private _destroyed = false;
+  private _onDestroyFns: Function[] = [];
 
   public parentPlayer: AnimationPlayer = null;
 
@@ -50,6 +51,8 @@ export class AnimationGroupPlayer implements AnimationPlayer {
 
   onDone(fn: () => void): void { this._onDoneFns.push(fn); }
 
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
   hasStarted() { return this._started; }
 
   play() {
@@ -78,6 +81,8 @@ export class AnimationGroupPlayer implements AnimationPlayer {
       this._onFinish();
       this._players.forEach(player => player.destroy());
       this._destroyed = true;
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
     }
   }
 

modules/@angular/core/src/animation/animation_player.ts

@@ -15,6 +15,7 @@ import {scheduleMicroTask} from '../facade/lang';
 export abstract class AnimationPlayer {
   abstract onDone(fn: () => void): void;
   abstract onStart(fn: () => void): void;
+  abstract onDestroy(fn: () => void): void;
   abstract init(): void;
   abstract hasStarted(): boolean;
   abstract play(): void;
@@ -32,16 +33,22 @@ export abstract class AnimationPlayer {
 export class NoOpAnimationPlayer implements AnimationPlayer {
   private _onDoneFns: Function[] = [];
   private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
   private _started = false;
+  private _destroyed = false;
+  private _finished = false;
   public parentPlayer: AnimationPlayer = null;
   constructor() { scheduleMicroTask(() => this._onFinish()); }
-  /** @internal */
-  _onFinish() {
-    this._onDoneFns.forEach(fn => fn());
-    this._onDoneFns = [];
+  private _onFinish() {
+    if (!this._finished) {
+      this._finished = true;
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
+    }
   }
   onStart(fn: () => void): void { this._onStartFns.push(fn); }
   onDone(fn: () => void): void { this._onDoneFns.push(fn); }
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
   hasStarted(): boolean { return this._started; }
   init(): void {}
   play(): void {
@@ -54,7 +61,14 @@ export class NoOpAnimationPlayer implements AnimationPlayer {
   pause(): void {}
   restart(): void {}
   finish(): void { this._onFinish(); }
-  destroy(): void {}
+  destroy(): void {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      this.finish();
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
+    }
+  }
   reset(): void {}
   setPosition(p: number): void {}
   getPosition(): number { return 0; }

modules/@angular/core/src/animation/animation_sequence_player.ts

@@ -15,6 +15,7 @@ export class AnimationSequencePlayer implements AnimationPlayer {
   private _activePlayer: AnimationPlayer;
   private _onDoneFns: Function[] = [];
   private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
   private _finished = false;
   private _started = false;
   private _destroyed = false;
@@ -60,6 +61,8 @@ export class AnimationSequencePlayer implements AnimationPlayer {
 
   onDone(fn: () => void): void { this._onDoneFns.push(fn); }
 
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
   hasStarted() { return this._started; }
 
   play(): void {
@@ -101,6 +104,8 @@ export class AnimationSequencePlayer implements AnimationPlayer {
       this._players.forEach(player => player.destroy());
       this._destroyed = true;
       this._activePlayer = new NoOpAnimationPlayer();
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
     }
   }
 

modules/@angular/core/src/core.ts

@@ -38,3 +38,4 @@ export {AnimationPlayer} from './animation/animation_player';
 export {AnimationStyles} from './animation/animation_styles';
 export {AnimationKeyframe} from './animation/animation_keyframe';
 export {Sanitizer, SecurityContext} from './security';
+export {TransitionFactory, TransitionInstruction, Trigger} from './triggers';

modules/@angular/core/src/core_private_export.ts

@@ -40,6 +40,7 @@ import * as reflection_capabilities from './reflection/reflection_capabilities';
 import * as reflector_reader from './reflection/reflector_reader';
 import * as reflection_types from './reflection/types';
 import * as api from './render/api';
+import {TransitionEngine} from './transition/transition_engine';
 import * as decorators from './util/decorators';
 import {isObservable, isPromise} from './util/lang';
 import * as viewEngine from './view/index';
@@ -110,7 +111,11 @@ export const __core_private__: {
   AnimationTransition: typeof AnimationTransition
   view_utils: typeof view_utils,
   ERROR_COMPONENT_TYPE: typeof ERROR_COMPONENT_TYPE,
+<<<<<<< HEAD
   viewEngine: typeof viewEngine,
+=======
+  TransitionEngine: typeof TransitionEngine
+>>>>>>> 4577b7c2a... refactor(animations): introduce @angular/animation module
 } = {
   isDefaultChangeDetectionStrategy: constants.isDefaultChangeDetectionStrategy,
   ChangeDetectorStatus: constants.ChangeDetectorStatus,
@@ -161,5 +166,6 @@ export const __core_private__: {
   isPromise: isPromise,
   isObservable: isObservable,
   AnimationTransition: AnimationTransition,
-  ERROR_COMPONENT_TYPE: ERROR_COMPONENT_TYPE
+  ERROR_COMPONENT_TYPE: ERROR_COMPONENT_TYPE,
+  TransitionEngine: TransitionEngine
 };

modules/@angular/core/src/platform_core_providers.ts

@@ -12,6 +12,7 @@ import {Provider} from './di';
 import {Reflector, reflector} from './reflection/reflection';
 import {ReflectorReader} from './reflection/reflector_reader';
 import {TestabilityRegistry} from './testability/testability';
+import {NoOpTransitionEngine, TransitionEngine} from './transition/transition_engine';
 
 function _reflector(): Reflector {
   return reflector;
@@ -22,6 +23,7 @@ const _CORE_PLATFORM_PROVIDERS: Provider[] = [
   {provide: PlatformRef, useExisting: PlatformRef_},
   {provide: Reflector, useFactory: _reflector, deps: []},
   {provide: ReflectorReader, useExisting: Reflector},
+  {provide: TransitionEngine, useClass: NoOpTransitionEngine},
   TestabilityRegistry,
   Console,
 ];

modules/@angular/core/src/transition/transition_engine.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {AnimationPlayer, NoOpAnimationPlayer} from '../animation/animation_player';
+import {TransitionInstruction} from '../triggers';
+
+
+/**
+ * @experimental Transition support is experimental.
+ */
+export abstract class TransitionEngine {
+  abstract insertNode(container: any, element: any): void;
+  abstract removeNode(element: any): void;
+  abstract process(element: any, instructions: TransitionInstruction[]): AnimationPlayer;
+  abstract triggerAnimations(): void;
+}
+
+/**
+ * @experimental Transition support is experimental.
+ */
+export class NoOpTransitionEngine extends TransitionEngine {
+  constructor() { super(); }
+
+  insertNode(container: any, element: any): void { container.appendChild(element); }
+
+  removeNode(element: any): void { remove(element); }
+
+  process(element: any, instructions: TransitionInstruction[]): AnimationPlayer {
+    return new NoOpAnimationPlayer();
+  }
+
+  triggerAnimations(): void {}
+}
+
+function remove(element: any) {
+  element.parentNode.removeChild(element);
+}

modules/@angular/core/src/triggers.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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
+ */
+
+/**
+ * @experimental View triggers are experimental
+ */
+export interface Trigger {
+  name: string;
+  transitionFactories: TransitionFactory[];
+}
+
+/**
+ * @experimental View triggers are experimental
+ */
+export interface TransitionFactory {
+  match(currentState: any, nextState: any): TransitionInstruction;
+}
+
+/**
+ * @experimental View triggers are experimental
+ */
+export interface TransitionInstruction {}

modules/@angular/core/testing/mock_animation_player.ts

@@ -10,6 +10,7 @@ import {AUTO_STYLE, AnimationPlayer} from '@angular/core';
 export class MockAnimationPlayer implements AnimationPlayer {
   private _onDoneFns: Function[] = [];
   private _onStartFns: Function[] = [];
+  private _onDestroyFns: Function[] = [];
   private _finished = false;
   private _destroyed = false;
   private _started = false;
@@ -47,6 +48,8 @@ export class MockAnimationPlayer implements AnimationPlayer {
 
   onStart(fn: () => void): void { this._onStartFns.push(fn); }
 
+  onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
+
   hasStarted() { return this._started; }
 
   play(): void {
@@ -76,6 +79,8 @@ export class MockAnimationPlayer implements AnimationPlayer {
       this._destroyed = true;
       this.finish();
       this.log.push('destroy');
+      this._onDestroyFns.forEach(fn => fn());
+      this._onDestroyFns = [];
     }
   }