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.

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

@@ -14,6 +14,7 @@ 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';
 
   /**
    * 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)">
+  [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+  [class.mdc-tooltip--multiline]="_isMultiline">
   <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">{{message}}</div>
 </div>

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

@@ -11,4 +11,46 @@
   // depending on the state of the overlay. For tooltips the overlay panel should never enable
   // pointer events. To overwrite the inline CSS from the overlay reference `!important` is needed.
   pointer-events: none !important;
+
+  opacity: 0;
+  transform: scale(0.8);
+
+  // Use a very short animation if animations are disabled so the `animationend` event still fires.
+  &._mat-animation-noopable {
+    animation-duration: 1ms;
+  }
+}
+
+// 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;
 }