fix(platform-browser): wait until animation completion before destroy…

…ing renderer (#50677)

Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.

This commit, updates this destroy logic to be call the render destroy once the animations complete.

This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5

PR Close #50677

packages/animations/browser/src/render/animation_engine_next.ts

@@ -113,4 +113,8 @@ export class AnimationEngine {
   whenRenderingDone(): Promise<any> {
     return this._transitionEngine.whenRenderingDone();
   }
+
+  afterFlushAnimationsDone(cb: VoidFunction): void {
+    this._transitionEngine.afterFlushAnimationsDone(cb);
+  }
 }

packages/platform-browser/animations/src/animation_renderer.ts

@@ -138,19 +138,24 @@ export class AnimationRendererFactory implements RendererFactory2 {
 export class BaseAnimationRenderer implements Renderer2 {
   constructor(
       protected namespaceId: string, public delegate: Renderer2, public engine: AnimationEngine,
-      private _onDestroy?: () => void) {
-    this.destroyNode = this.delegate.destroyNode ? (n) => delegate.destroyNode!(n) : null;
-  }
+      private _onDestroy?: () => void) {}
 
   get data() {
     return this.delegate.data;
   }
 
-  destroyNode: ((n: any) => void)|null;
+  destroyNode(node: any): void {
+    this.delegate.destroyNode?.(node);
+  }
 
   destroy(): void {
     this.engine.destroy(this.namespaceId, this.delegate);
-    this.delegate.destroy();
+    this.engine.afterFlushAnimationsDone(() => {
+      // Call the renderer destroy method after the animations has finished as otherwise styles will
+      // be removed too early which will cause an unstyled animation.
+      this.delegate.destroy();
+    });
+
     this._onDestroy?.();
   }