fix(tooltip): decouple removal logic from change detection

Currently the logic in the tooltip that removes it from the DOM is run either if the trigger is destroyed or the exit animation has finished. The problem is that if the trigger is detached from change detection, but hasn't been destroyed, the exit animation will never run and the element won't be cleaned up. These changes switch to using CSS animations and manipulating the DOM node directly to trigger the animation.

Fixes #19365.

Author: crisbeto

src/material/tooltip/BUILD.bazel

@@ -29,7 +29,6 @@ ng_module(
         "//src/cdk/portal",
         "//src/cdk/scrolling",
         "//src/material/core",
-        "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//rxjs",
@@ -65,7 +64,6 @@ ng_test_library(
         "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/testing/private",
-        "@npm//@angular/animations",
         "@npm//@angular/platform-browser",
     ],
 )

src/material/tooltip/testing/tooltip-harness.ts

@@ -31,14 +31,13 @@ export class MatTooltipHarness extends ComponentHarness {
 
   /** Hides the tooltip. */
   async hide(): Promise<void> {
-    const host = await this.host();
-    await host.mouseAway();
-    await this.forceStabilize(); // Needed in order to flush the `hide` animation.
+    return (await this.host()).mouseAway();
   }
 
   /** Gets whether the tooltip is open. */
   async isOpen(): Promise<boolean> {
-    return !!(await this._optionalPanel());
+    const panel = await this._optionalPanel();
+    return !!panel && !(await panel.hasClass('mat-tooltip-hide'));
   }
 
   /** Gets a promise for the tooltip panel's text. */

src/material/tooltip/tooltip.html

@@ -1,6 +1,6 @@
-<div class="mat-tooltip"
+<div #tooltip
+     class="mat-tooltip"
      [ngClass]="tooltipClass"
+     [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
      [class.mat-tooltip-handset]="(_isHandset | async)?.matches"
-     [@state]="_visibility"
-     (@state.start)="_animationStart()"
-     (@state.done)="_animationDone($event)">{{message}}</div>
+     (animationend)="_animationEnd($event)">{{message}}</div>

src/material/tooltip/tooltip.scss

@@ -24,6 +24,13 @@ $mat-tooltip-handset-margin: 24px;
   padding-right: $mat-tooltip-horizontal-padding;
   overflow: hidden;
   text-overflow: ellipsis;
+  opacity: 0;
+  transform: scale(0);
+
+  // Use a very short animation if animations are disabled so the `animationend` event still fires.
+  &._mat-animation-noopable {
+    animation-duration: 1ms;
+  }
 
   @include cdk-high-contrast(active, off) {
     outline: solid 1px;
@@ -35,3 +42,38 @@ $mat-tooltip-handset-margin: 24px;
   padding-left: $mat-tooltip-handset-horizontal-padding;
   padding-right: $mat-tooltip-handset-horizontal-padding;
 }
+
+@keyframes mat-tooltip-show {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(0.99);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes mat-tooltip-hide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.mat-tooltip-show {
+  animation: mat-tooltip-show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+.mat-tooltip-hide {
+  animation: mat-tooltip-hide 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}