Angular 6 Material组件动画失效问题求助

我来帮你排查sidenav和菜单动画无法正常运行的问题，从你提供的代码来看，核心问题集中在模块导入缺失和组件初始化不全上，下面一步步来解决：

1. 确保BrowserAnimationsModule已在根模块导入 #

你提到怀疑BrowserAnimationsModule，但你没提供app.module.ts的内容——这才是关键！@angular/animations只是依赖包，BrowserAnimationsModule必须在根模块中显式导入，Material的动画才能生效。

打开app.module.ts，添加以下导入和配置：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // 保留你已有的其他导入（比如BrowserModule、MatSidenavModule等）
    BrowserAnimationsModule
  ],
  // ...其他模块配置
})
export class AppModule { }

添加后重启项目，这是动画生效的基础条件。

2. 修复AppComponent中mobileQuery的初始化问题 #

你的app.component.ts里只声明了mobileQuery但没有初始化，这会导致sidenav的响应式配置（mode和fixedInViewport）失效，进而影响动画运行。请更新组件代码：

import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  mobileQuery: MediaQueryList;
  private _mobileQueryListener: () => void;
  shouldRun = true;

  fillerNav = Array(50).fill(0).map((_, i) => `Nav Item 14313413 ${i + 1}`);
  fillerContent = Array(50).fill(0).map(() => `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserun`);

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    // 初始化响应式媒体查询
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    // 销毁时移除监听，避免内存泄漏
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
}

这段代码会正确初始化响应式查询，让sidenav在移动端和桌面端的模式切换正常，动画也能随之触发。

3. 确认HammerJS已正确导入 #

你的package.json里已经安装了hammerjs，但需要在项目入口文件main.ts中导入它，否则部分Material组件的交互和动画可能异常：

import 'hammerjs';

4. 排查版本兼容性问题 #

你的Angular核心版本是6.0.3，但@angular/material和@angular/cdk是6.1.0，虽然小版本差异一般不会出大问题，但为了避免潜在的兼容性bug，建议让它们版本一致：

# 将Material/CDK降级到与Angular核心一致的6.0.3
npm install @angular/material@6.0.3 @angular/cdk@6.0.3 --save

或者升级Angular核心到6.1.0：

ng update @angular/core@6.1.0

5. 检查是否禁用了动画 #

如果你的app.module.ts中导入了NoopAnimationsModule，它会替代BrowserAnimationsModule并禁用所有动画，请务必移除它：

// 不要导入这个！
// import { NoopAnimationsModule } from '@angular/platform-browser/animations';

按以上步骤排查后，sidenav和菜单的平滑动画应该就能正常运行了。

内容的提问来源于stack exchange，提问作者Стас Рябцев