fix(material/dialog): opening animation sometimes being skipped (#26971)

When we trigger a dialog animation, we set a CSS variable and a couple of classes to start it, however because we were adding the classes imemdiately after setting the variable, sometimes the animation would be skipped because the browser didn't have time to recalculate the styles.

These changes resolve the issue by adding the classes in a `requestAnimationFrame` which gives the browser enough time to pick up the animation duration.

Fixes #26931.

(cherry picked from commit 1f51ecc)

Author: crisbeto

src/cdk/dialog/dialog-container.ts

@@ -96,7 +96,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
     @Optional() @Inject(DOCUMENT) _document: any,
     @Inject(DialogConfig) readonly _config: C,
     private _interactivityChecker: InteractivityChecker,
-    private _ngZone: NgZone,
+    protected _ngZone: NgZone,
     private _overlayRef: OverlayRef,
     private _focusMonitor?: FocusMonitor,
   ) {

src/material/dialog/dialog-container.ts

@@ -166,7 +166,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     ? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION
     : 0;
   /** Current timer for dialog animations. */
-  private _animationTimer: number | null = null;
+  private _animationTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor(
     elementRef: ElementRef,
@@ -221,14 +221,15 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     this._animationStateChanged.emit({state: 'opening', totalTime: this._openAnimationDuration});
 
     if (this._animationsEnabled) {
-      // One would expect that the open class is added once the animation finished, but MDC
-      // uses the open class in combination with the opening class to start the animation.
       this._hostElement.style.setProperty(
         TRANSITION_DURATION_PROPERTY,
         `${this._openAnimationDuration}ms`,
       );
-      this._hostElement.classList.add(OPENING_CLASS);
-      this._hostElement.classList.add(OPEN_CLASS);
+
+      // We need to give the `setProperty` call from above some time to be applied.
+      // One would expect that the open class is added once the animation finished, but MDC
+      // uses the open class in combination with the opening class to start the animation.
+      this._requestAnimationFrame(() => this._hostElement.classList.add(OPENING_CLASS, OPEN_CLASS));
       this._waitForAnimationToComplete(this._openAnimationDuration, this._finishDialogOpen);
     } else {
       this._hostElement.classList.add(OPEN_CLASS);
@@ -253,7 +254,9 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
         TRANSITION_DURATION_PROPERTY,
         `${this._openAnimationDuration}ms`,
       );
-      this._hostElement.classList.add(CLOSING_CLASS);
+
+      // We need to give the `setProperty` call from above some time to be applied.
+      this._requestAnimationFrame(() => this._hostElement.classList.add(CLOSING_CLASS));
       this._waitForAnimationToComplete(this._closeAnimationDuration, this._finishDialogClose);
     } else {
       // This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
@@ -297,8 +300,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
 
   /** Clears all dialog animation classes. */
   private _clearAnimationClasses() {
-    this._hostElement.classList.remove(OPENING_CLASS);
-    this._hostElement.classList.remove(CLOSING_CLASS);
+    this._hostElement.classList.remove(OPENING_CLASS, CLOSING_CLASS);
   }
 
   private _waitForAnimationToComplete(duration: number, callback: () => void) {
@@ -310,4 +312,15 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     // the related events like `afterClosed` to be inside the zone as well.
     this._animationTimer = setTimeout(callback, duration);
   }
+
+  /** Runs a callback in `requestAnimationFrame`, if available. */
+  private _requestAnimationFrame(callback: () => void) {
+    this._ngZone.runOutsideAngular(() => {
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(callback);
+      } else {
+        callback();
+      }
+    });
+  }
 }

src/material/dialog/dialog.spec.ts

@@ -2000,6 +2000,8 @@ describe('MDC-based MatDialog with animations enabled', () => {
     expect(spy).not.toHaveBeenCalled();
 
     tick(OPEN_ANIMATION_DURATION);
+    flush();
+
     expect(spy).toHaveBeenCalled();
   }));
 

tools/public_api_guard/cdk/dialog.md

@@ -64,6 +64,8 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends B
     protected _focusTrapFactory: FocusTrapFactory;
     // (undocumented)
     ngOnDestroy(): void;
+    // (undocumented)
+    protected _ngZone: NgZone;
     _portalOutlet: CdkPortalOutlet;
     _recaptureFocus(): void;
     protected _trapFocus(): void;