Question

我有角度材料导航选项卡，如下面的示例所示。标签本身可以正常工作，导航也可以。我的问题是动画不起作用。当我单击一个标签时，而不是动画，我会在几秒钟内得到三倍尺寸的标签。我在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",

Answer 1

动画无效，因为我忘记添加到styles.css默认主题中。没有动画，除了动画之外，其他所有东西都起作用。所以只需添加您的样式

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

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

角度材质标签动画不起作用

1 个答案: