Angular material tab animation doesn't work

问题

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.

Edit:

My dependencies:

"@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",

回答1:

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";

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

来源：https://stackoverflow.com/questions/52614198/angular-material-tab-animation-doesnt-work