fix(cdk/overlay): animations interrupted on repeat insertions (#24815)

When an overlay is detached, we remove it from the change detection tree and the DOM, but we don't destroy it completely so that it can be re-attached. Re-attachment is the same process, but in reverse: we re-add the element to the DOM and the change detection tree. The problem is that we were attaching the element to the change detection tree before re-inserting it into the DOM which caused the Angular animations package not to animate the element since it's not in the DOM yet.

These changes resolve the issue by attaching the element to the DOM first.

Fixes #24749.

(cherry picked from commit 0faba6e)

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -105,13 +105,14 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
    * @returns The portal attachment result.
    */
   attach(portal: Portal<any>): any {
-    let attachResult = this._portalOutlet.attach(portal);
-
-    // Update the pane element with the given configuration.
+    // Insert the host into the DOM before attaching the portal, otherwise
+    // the animations module will skip animations on repeat attachments.
     if (!this._host.parentElement && this._previousHostParent) {
       this._previousHostParent.appendChild(this._host);
     }
 
+    const attachResult = this._portalOutlet.attach(portal);
+
     if (this._positionStrategy) {
       this._positionStrategy.attach(this);
     }