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

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;
+}