角度材质选项卡动画不起作用答案

【问题标题】：Angular material tab animation doesn't work角度材质选项卡动画不起作用
【发布时间】：2018-10-02 18:22:30
【问题描述】：

我有如下示例所示的角度材质导航选项卡。标签本身可以正常工作，导航也可以。我的问题是动画不起作用。当我单击一个选项卡时，我会在几秒钟内获得三倍大小的选项卡，而不是动画。我在 app.module.ts 的导入中有 BrowserAnimationsModule 和 MatTabsModule。可能是什么问题？如何修复动画？

<nav mat-tab-nav-bar>
  <a mat-tab-link [routerLink]="'/'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
    Home
  </a>
  <a mat-tab-link [routerLink]="'/projects'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
    Projects
  </a>
  <a mat-tab-link [routerLink]="'/about'" routerLinkActive #rla="routerLinkActive"   [active]="rla.isActive">
    About
  </a>
</nav>

非常感谢任何建议、提示和链接。

编辑：

我的依赖：

"@angular/animations": "^6.1.0",
"@angular/cdk": "6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",

【问题讨论】：

你有 Stackblitz 吗？ GIF？您能否也说明您的 Angular 和 Angular Material 版本？最后，最好使用不绑定的routerLink。

标签： html angular animation angular-material

【解决方案1】：

动画不起作用，因为我忘记添加到styles.css 默认主题。没有它，除了动画，一切都正常。所以只需添加到您的样式中

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

如果您在向项目添加材料时遇到类似问题，只需阅读手册两次，您可能会遗漏一些东西。 https://material.angular.io/guide/getting-started

【讨论】：