我试图获得一个简单的 :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: …