Angular Material Snackbar显示异常求助：先居中再从底部滑入

我之前在使用Angular Material 5版本时也碰到过几乎一模一样的Snackbar表现异常问题——弹出时先闪现在屏幕中央，消失后再从底部正常滑入。结合你的依赖配置来看，主要可以从这几个方向解决：

1. 修复版本兼容性问题 #

你的Angular核心框架是5.0.0正式版，但@angular/cdk和@angular/material用的是5.0.0-rc.3候选发布版，RC版本和正式版之间的动画逻辑可能存在不兼容的bug。

建议把CDK和Material升级到和Angular核心一致的正式版，执行以下命令：

npm install @angular/cdk@5.0.0 @angular/material@5.0.0 --save

升级后重启项目，大部分情况下这个异常动画的问题就会消失。

2. 检查动画模块配置 #

确保你在根模块（AppModule）中正确导入了BrowserAnimationsModule，而不是NoopAnimationsModule——后者会禁用所有动画，可能导致Snackbar的定位逻辑混乱。

正确的导入示例：

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

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    // 其他必要模块
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 排查全局样式冲突 #

检查你的全局样式文件（比如styles.css/styles.scss）中有没有对.mat-snack-bar-container或者Material动画相关类（比如mat-snack-bar）设置自定义样式，比如强制修改position、top/left属性，这会覆盖Material默认的动画定位逻辑。

可以先临时注释掉所有自定义的全局样式，测试Snackbar是否恢复正常表现，再逐步排查是哪段样式导致的冲突。

4. 确认Snackbar调用配置 #

检查你调用Snackbar的代码有没有错误设置verticalPosition参数，比如不小心设成了'top'或者其他值，这会导致组件先尝试在错误位置渲染，再修正到正确的底部位置，出现闪屏现象。

正确的调用示例（保持默认底部定位即可）：

import { MatSnackBar } from '@angular/material';

constructor(private snackBar: MatSnackBar) {}

showNotification(message: string) {
  this.snackBar.open(message, '关闭', {
    duration: 3000,
    // 不需要额外设置verticalPosition，默认就是bottom
  });
}

另外补充一句：Angular 5版本已经比较老旧了，虽然上面的方法能解决当前问题，但如果项目允许的话，建议逐步升级到较新的LTS版本，后续的Material版本修复了大量这类动画和组件表现的bug，稳定性会好很多。

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