fix(material/tooltip): decouple removal logic from change detection (#19432)

* fix(material/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.

* fixup! fix(material/tooltip): decouple removal logic from change detection

Author: crisbeto

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

@@ -14,6 +14,9 @@ export class MatTooltipHarness extends _MatTooltipHarnessBase {
   protected _optionalPanel =
     this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
   static hostSelector = '.mat-mdc-tooltip-trigger';
+  protected _hiddenClass = 'mat-mdc-tooltip-hide';
+  protected _showAnimationName = 'mat-mdc-tooltip-show';
+  protected _hideAnimationName = 'mat-mdc-tooltip-hide';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search

src/material-experimental/mdc-tooltip/tooltip.html

@@ -1,9 +1,8 @@
 <div
+  #tooltip
   class="mdc-tooltip mdc-tooltip--shown mat-mdc-tooltip"
   [ngClass]="tooltipClass"
-  [class.mdc-tooltip--multiline]="_isMultiline"
-  [@state]="_visibility"
-  (@state.start)="_animationStart()"
-  (@state.done)="_animationDone($event)">
+  (animationend)="_handleAnimationEnd($event)"
+  [class.mdc-tooltip--multiline]="_isMultiline">
   <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">{{message}}</div>
 </div>

src/material-experimental/mdc-tooltip/tooltip.scss

@@ -6,6 +6,7 @@
 .mat-mdc-tooltip {
   // We don't use MDC's positioning so this has to be relative.
   position: relative;
+  transform: scale(0);
 
   // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
   &::before {
@@ -18,8 +19,47 @@
     z-index: -1;
     position: absolute;
   }
+
+  &._mat-animation-noopable {
+    animation: none;
+    transform: scale(1);
+  }
 }
 
 .mat-mdc-tooltip-panel-non-interactive {
   pointer-events: none;
 }
+
+// TODO(crisbeto): we may be able to use MDC directly for these animations.
+
+@keyframes mat-mdc-tooltip-show {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes mat-mdc-tooltip-hide {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+.mat-mdc-tooltip-show {
+  animation: mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+.mat-mdc-tooltip-hide {
+  animation: mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}