2

我正在尝试制作一个简单的 :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>

4

1 回答 1

5

试试这个——指令的使用[matTabContent]

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
    </ng-template>
  </mat-tab>
</mat-tab-group>
于 2020-10-30T13:10:32.767 回答