fix(material/dialog): scale animation not working (#28449)

[A change in MDC](material-components/material-components-web@d153db6) moved the `transform` animation from the container to the surface which broke our implementation.

These changes also take the chance to fix that the animation was targeting all properties, rather than just `transform` and `opacity`. I've also fixed up the demo a bit to make it less jumpy.

Fixes #28447.

Author: crisbeto

src/dev-app/dialog/dialog-demo.ts

@@ -195,24 +195,24 @@ export class JazzDialog {
     `
     img {
       max-width: 100%;
+      height: 800px;
     }
   `,
   ],
   template: `
     <h2 mat-dialog-title>Neptune</h2>
 
     <mat-dialog-content>
-      <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
-
       <p>
         Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the
         Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet,
         and the densest giant planet. Neptune is 17 times the mass of Earth and is slightly more
         massive than its near-twin Uranus, which is 15 times the mass of Earth and slightly larger
         than Neptune. Neptune orbits the Sun once every 164.8 years at an average distance of 30.1
-        astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the
+        astronomical units (4.50x109 km). It is named after the Roman god of the sea and has the
         astronomical symbol ♆, a stylised version of the god Neptune's trident.
       </p>
+      <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
     </mat-dialog-content>
 
     <mat-dialog-actions [align]="actionsAlignment">

src/material/dialog/dialog.scss

@@ -1,4 +1,5 @@
 @use '@material/dialog' as mdc-dialog;
+@use '@material/animation/animation' as mdc-animation;
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/mdc-helpers/mdc-helpers';
@@ -33,14 +34,20 @@ $mat-dialog-button-horizontal-margin: 8px !default;
     outline: 0;
 
     .mdc-dialog__container {
-      transition-duration: var(--mat-dialog-transition-duration, 0ms);
+      transition: opacity linear var(--mat-dialog-transition-duration, 0ms);
+    }
+
+    .mdc-dialog__surface {
+      transition: mdc-animation.enter(transform, var(--mat-dialog-transition-duration, 0ms));
     }
 
     // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
     // TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
     // conditionally add them. Consider the size cost and churn when deciding whether to switch.
-    &._mat-animation-noopable .mdc-dialog__container {
-      transition: none;
+    &._mat-animation-noopable {
+      .mdc-dialog__container, .mdc-dialog__surface {
+        transition: none;
+      }
     }
   }
 }