Angular中mat-tabs切换返回后:enter/:leave动画失效的解决

这个问题我之前在项目里也碰到过，核心原因就是Angular Material的mat-tab默认会把非活跃标签的内容直接从DOM里删掉——这就导致你切回原标签时，列表元素是重新创建的，但因为DOM重建的逻辑，:enter动画没被正确触发，甚至会出现列表隐藏的情况。

最简单的解决办法 #

只要把需要保留动画的标签内容用<ng-template matTabContent>包裹起来就行，这样Mat Tab就不会销毁DOM内容，只是通过CSS隐藏它，切换回来时动画就能正常触发了。

修改后的模板代码：

<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>

为什么这样管用？ #

默认情况下mat-tab会对非活跃标签执行销毁组件+移除DOM的操作，而用matTabContent指令后：

• 标签切换时，内容只是被设置为display: none，不会从DOM中移除
• 切回标签时，元素重新显示，:enter动画的触发条件被满足，自然就能正常跑起来
• 同时:leave动画也能在标签隐藏时正常触发，因为元素只是被隐藏而非销毁

这样改动很小，但完美解决了动画失效的问题，而且你的原有动画逻辑完全不用改，直接套用就行。

内容的提问来源于stack exchange，提问作者Olafvv