Angular中如何控制mat-drawer的切换动画速度？

要调整mat-drawer的展开/收起动画速度，你可以通过以下两种方式实现：

方法一：通过CSS覆盖默认过渡效果 #

这种方法适用于所有项目配置，直接修改元素的过渡时长即可：

全局生效（推荐） #

在项目的全局样式文件（如styles.css或styles.scss）中添加以下代码：

.example-container .mat-drawer {
  /* 将500ms改为你想要的时长，比如1s表示1秒 */
  transition: transform 500ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

注：这里使用.example-container是因为你的代码中mat-drawer容器带有该类，确保样式仅作用于目标抽屉，不会影响其他mat-drawer组件。

仅在当前组件生效 #

如果只想让当前组件的抽屉变慢，可在组件的样式文件中使用::ng-deep（虽已标记为弃用，但目前仍可正常使用）：

::ng-deep .example-container .mat-drawer {
  transition: transform 500ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

方法二：通过Sass变量修改（适用于使用SCSS的项目） #

如果你的项目使用SCSS，可以直接覆盖Angular Material的内置变量，这种方式更符合Material Design的定制规范：

在全局样式文件styles.scss中，在导入Angular Material主题之前添加变量定义：

/* 将500ms改为你需要的时长 */
$drawer-transition-duration: 500ms;

/* 导入Angular Material主题 */
@import '~@angular/material/theming';

这样所有mat-drawer组件的动画速度都会统一变为你设置的时长。

内容的提问来源于stack exchange，提问作者Vihan Gammanpila