我使用Angular版本21与 Material版本21：

<mat-form-field appearance="outline">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder">
  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

对 mat-label 的动画不起作用，Material文档中的示例也一样。

这是我的 app.config.js：

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    provideRouter(routes),
    { provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations' },
  ]
};

我发现我的 <mat-form-field> 缺少这个className mat-form-field-animations-enabled。

解决方案

Angular动画已被弃用，下面给出文档链接：

从Angular的 Animations包迁移

因此，在使用Angular Material时，并不强制要使用animations模块。

Stackblitz演示