feat(animations): make sure animation callback reports the totalTime (#11022)

Closes #11022

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

@@ -0,0 +1,51 @@
+/**
+ * @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
+ */
+
+/**
+ * An instance of this class is returned as an event parameter when an animation
+ * callback is captured for an animation either during the start or done phase.
+ *
+ * ```typescript
+ * @Component({
+ *   host: {
+ *     '[@myAnimationTrigger]': 'someExpression',
+ *     '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
+ *     '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
+ *   },
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *        // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   someExpression: any = false;
+ *   captureStartEvent(event: AnimationTransitionEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ *
+ *   captureDoneEvent(event: AnimationTransitionEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ * }
+ * ```
+ *
+ * @experimental Animation support is experimental.
+ */
+export class AnimationTransitionEvent {
+  public fromState: string;
+  public toState: string;
+  public totalTime: number;
+
+  constructor({fromState, toState,
+               totalTime}: {fromState: string, toState: string, totalTime: number}) {
+    this.fromState = fromState;
+    this.toState = toState;
+    this.totalTime = totalTime;
+  }
+}

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

@@ -9,6 +9,7 @@
 import {AnimationGroupPlayer} from '../animation/animation_group_player';
 import {AnimationOutput} from '../animation/animation_output';
 import {AnimationPlayer, NoOpAnimationPlayer} from '../animation/animation_player';
+import {AnimationTransitionEvent} from '../animation/animation_transition_event';
 import {ViewAnimationMap} from '../animation/view_animation_map';
 import {ChangeDetectorRef, ChangeDetectorStatus} from '../change_detection/change_detection';
 import {Injector} from '../di/injector';
@@ -81,22 +82,17 @@ export abstract class AppView<T> {
   }
 
   queueAnimation(
-      element: any, animationName: string, player: AnimationPlayer, fromState: string,
-      toState: string): void {
-    var actualAnimationDetected = !(player instanceof NoOpAnimationPlayer);
-    var animationData = {
-      'fromState': fromState,
-      'toState': toState,
-      'running': actualAnimationDetected
-    };
+      element: any, animationName: string, player: AnimationPlayer, totalTime: number,
+      fromState: string, toState: string): void {
+    var event = new AnimationTransitionEvent(
+        {'fromState': fromState, 'toState': toState, 'totalTime': totalTime});
     this.animationPlayers.set(element, animationName, player);
     player.onDone(() => {
       // TODO: make this into a datastructure for done|start
-      this.triggerAnimationOutput(element, animationName, 'done', animationData);
+      this.triggerAnimationOutput(element, animationName, 'done', event);
       this.animationPlayers.remove(element, animationName);
     });
-    player.onStart(
-        () => { this.triggerAnimationOutput(element, animationName, 'start', animationData); });
+    player.onStart(() => { this.triggerAnimationOutput(element, animationName, 'start', event); });
   }
 
   triggerQueuedAnimations() {
@@ -108,7 +104,7 @@ export abstract class AppView<T> {
   }
 
   triggerAnimationOutput(
-      element: any, animationName: string, phase: string, animationData: {[key: string]: any}) {
+      element: any, animationName: string, phase: string, event: AnimationTransitionEvent) {
     var listeners = this._animationListeners.get(element);
     if (isPresent(listeners) && listeners.length) {
       for (let i = 0; i < listeners.length; i++) {
@@ -116,7 +112,7 @@ export abstract class AppView<T> {
         // we check for both the name in addition to the phase in the event
         // that there may be more than one @trigger on the same element
         if (listener.output.name == animationName && listener.output.phase == phase) {
-          listener.handler(animationData);
+          listener.handler(event);
           break;
         }
       }