我有 Angular Material 导航选项卡,如下例所示。选项卡本身工作正常,导航也工作。我的问题是动画不起作用。当我单击一个选项卡时,我得到的是三倍大小的选项卡,而不是动画,持续了几秒钟。我在我的 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",
最佳答案
动画不起作用,因为我忘记添加到 styles.css
默认主题。没有它,除了动画之外一切正常。所以只需添加到您的样式
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
如果您在向项目添加 Material 时遇到类似问题只是阅读手册两次,您可能会遗漏一些东西。 https://material.angular.io/guide/getting-started
关于html - Angular Material 选项卡动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52614198/