fix(material/sidenav): not resetting margin if transition does not start

Currently the sidenav sets its margin when the transition starts, however that might not happen if its interruped which can leave it in a broken state.

These changes switch to always dispatching the event.

Fixes #32992.

Author: crisbeto

src/material/sidenav/drawer.ts

@@ -364,7 +364,6 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
             });
           }
         }),
-        renderer.listen(element, 'transitionrun', this._handleTransitionEvent),
         renderer.listen(element, 'transitionend', this._handleTransitionEvent),
         renderer.listen(element, 'transitioncancel', this._handleTransitionEvent),
       ];
@@ -568,17 +567,24 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
 
     this._opened.set(isOpen);
 
-    if (this._container?._transitionsEnabled) {
-      // Note: it's important to set this as early as possible,
-      // otherwise the animation can look glitchy in some cases.
-      this._setIsAnimating(true);
-    } else {
-      // Simulate the animation events if animations are disabled.
-      setTimeout(() => {
-        this._animationStarted.next();
-        this._animationEnd.next();
-      });
-    }
+    this._ngZone.runOutsideAngular(() => {
+      if (this._container?._transitionsEnabled) {
+        // Note: it's important to set this as early as possible,
+        // otherwise the animation can look glitchy in some cases.
+        this._setIsAnimating(true);
+
+        // Previously we dispatched this in a `transitionrun` event, but it might not fire
+        // if the element is hidden (see #32992). Since this event is load-bearing for the
+        // margin calculations, we need it to fire consistently.
+        setTimeout(() => this._animationStarted.next());
+      } else {
+        // Simulate the animation events if animations are disabled.
+        setTimeout(() => {
+          this._animationStarted.next();
+          this._animationEnd.next();
+        });
+      }
+    });
 
     this._elementRef.nativeElement.classList.toggle('mat-drawer-opened', isOpen);
 
@@ -646,17 +652,13 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
 
     if (event.target === element) {
       this._ngZone.run(() => {
-        if (event.type === 'transitionrun') {
-          this._animationStarted.next(event);
-        } else {
-          // Don't toggle the animating state on `transitioncancel` since another animation should
-          // start afterwards. This prevents the drawer from blinking if an animation is interrupted.
-          if (event.type === 'transitionend') {
-            this._setIsAnimating(false);
-          }
-
-          this._animationEnd.next(event);
+        // Don't toggle the animating state on `transitioncancel` since another animation should
+        // start afterwards. This prevents the drawer from blinking if an animation is interrupted.
+        if (event.type === 'transitionend') {
+          this._setIsAnimating(false);
         }
+
+        this._animationEnd.next(event);
       });
     }
   };
@@ -941,6 +943,7 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
    * is properly hidden.
    */
   private _watchDrawerToggle(drawer: MatDrawer): void {
+    //
     drawer._animationStarted.pipe(takeUntil(this._drawers.changes)).subscribe(() => {
       this.updateContentMargins();
       this._changeDetectorRef.markForCheck();