角度材质选项卡动画不起作用 [英] Angular material tab animation doesn't work
问题描述
我有角材料导航选项卡,如下面的示例所示.标签本身工作正常,导航也工作正常.我的问题是动画不起作用.当我单击一个选项卡时,我会在几秒钟内获得三倍大小的选项卡,而不是动画.我在 app.module.ts 的导入中有 BrowserAnimationsModule
和 MatTabsModule
.可能是什么问题?如何修复动画?
I have angular material navigation tabs like in sample below. Tabs itself works fine and navigation works too. My issue is animation doesn't work. When I click a tab, instead of animation I get tab of triple size for couple of seconds. I have BrowserAnimationsModule
and MatTabsModule
in my imports in my app.module.ts. What might be the issue? How to fix animation?
<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>
非常感谢任何建议、提示和链接.
Any suggestions, tips and links are highly appreciated.
我的依赖:
"@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
默认主题.没有它,除了动画,一切都正常.所以只需添加到您的样式
Animation didn't work because I forgot to add to styles.css
default theme. Without it everything worked except animation. So just add to your styles
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
如果您在向项目添加材料时遇到类似问题,只需阅读手册两遍,您可能会错过一些内容.https://material.angular.io/guide/getting-started
If you encountered similar problems just read manual twice when adding material to your project, you might missed something. https://material.angular.io/guide/getting-started
这篇关于角度材质选项卡动画不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!