使用Angular动画重现材质选项卡

Question

我正在尝试使用Angular动画通过一个组件重现Angular Material MatTab的行为。当标签内容更改时，我希望div父母平滑地调整他的身高。

我尝试了以下方法：

<div>
  <a (click)="tabState = 'tab1'">Tab 1</a>
  <a (click)="tabState = 'tab2'">Tab 2</a>
  <a (click)="tabState = 'tab3'">Tab 3</a>
</div>
<div [@tabs]="tabState">
  <div [ngSwitch]="tabState">
    <div *ngSwitchCase="'tab1'">Content 1A</div>
    <div *ngSwitchCase="'tab2'">Content 1B<br/>Content 2B</div>
    <div *ngSwitchCase="'tab3'">Content 1C<br/>Content 2C<br/>Content 3C</div>
  </div>
</div>

和我的TS文件：

trigger('tabs', [
    state('closed', style({ height: 0 })),
    state('tab1',   style({ height: '*' })),
    state('tab2',   style({ height: '*' })),
    state('tab3',   style({ height: '*' })),
    transition('* => *', [
      animate('0.2s ease-in-out')
    ])
  ]
])

但它似乎仅适用于处于关闭状态的过渡，不适用于具有自动高度的制表符之间。任何对此的想法都非常欢迎。