切换回来后，角度动画在垫片内不起作用

Question

我正试图获得一个简单的：enter/：leaf动画来处理垫子选项卡内的垫子列表。初始动画没有问题，当切换到不同的选项卡并返回到第一个选项卡时会出现问题。此时，动画不会被触发，并且列表保持隐藏状态。

列表消失是有道理的，因为当您切换到不同的选项卡时，选项卡的内容会从DOM中删除。有没有办法将内容保留在DOM中，或者确保动画再次被触发？

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

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>

Answer 1

试试这个-指令[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>