切换回后，角度动画在mat-tabs中不起作用

如何解决切换回后，角度动画在mat-tabs中不起作用

我正在尝试获取一个简单的：enter /：leave动画，以在mat-tab中的mat-list上工作。初始动画没问题，切换到其他选项卡并返回第一个选项卡时会出现问题。那时动画没有被触发，列表保持隐藏。

由于当您切换到其他选项卡时，选项卡的内容已从DOM中删除，因此列表消失确实很有意义。有没有办法将内容保留在DOM中或确保再次触发动画？

这是我当前的模板和组件。我还做了一个Stackblitz示例。

import { Component } from '@angular/core';
import { trigger,transition,style,sequence,animate} from '@angular/animations';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ],animations: [
    trigger('fadeAndSlideTop',[
      transition(':enter',[
        style({opacity: '0',height: '0'}),animate('150ms ease-in',style({opacity: '1',height: '*'}))
      ]),transition(':leave',[
        animate('150ms ease-out',style({opacity: '0',height: '0'}))
      ])
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  list = [
    {id: 1,text: 'Item 1'},{id: 2,text: 'Item 2'},{id: 3,text: 'Item 3'},]
}

<mat-tab-group dynamicHeight="true">
    <mat-tab label="List">
        <h4>List examples</h4>
        <mat-action-list class="list">
            <button mat-list-item class="list-item" *ngFor="let item of list" [@fadeAndSlideTop]>
        <span>{{item.text}}</span>
        <mat-divider></mat-divider>
      </button>
        </mat-action-list>
    </mat-tab>
    <mat-tab label="Other things">
        <h2>Other things come here</h2>
    </mat-tab>
</mat-tab-group>

https://stackblitz.com/edit/angular-9-material-starter-sqsqgu?file=src/app/app.component.html

答案

因此，在使用Kavinda Senarathne的答案之后，我得到了效果很好的模板。

<mat-tab-group dynamicHeight="true">
    <mat-tab label="List">
    <ng-template matTabContent>
          <h4>List examples</h4>
          <mat-action-list class="list">
              <button mat-list-item class="list-item" *ngFor="let item of list" [@fadeAndSlideTop]>
          <span>{{item.text}}</span>
          <mat-divider></mat-divider>
        </button>
          </mat-action-list>
    </ng-template>
    </mat-tab>
    <mat-tab label="Other things">
        <h2>Other things come here</h2>
    </mat-tab>
</mat-tab-group>

解决方法

尝试一下-使用指令myDF = pd.DataFrame.from_dict({'id': {0: '403',1: '402',2: '401'},'d': {0: {'cases': 1,'suspects': 22,'negative': 0,'stats': [{'diag': 'casesELISA','sex': 'F','cases': 1},{'diag': 'suspects','sex': 'M','cases': 11},'cases': 10},{'diag': 'suspectsPCR','cases': 1}]},1: {'cases': 0,'suspects': 18,'stats': [{'diag': 'suspects','cases': 9},'cases': 9}]},2: {'cases': 0,'suspects': 31,'cases': 12},'cases': 18},'cases': 1}]}}})

[matTabContent]