当 mat-tab 处于活动状态时启动角度动画答案

【问题标题】：Start angular animation when a mat-tab is active当 mat-tab 处于活动状态时启动角度动画
【发布时间】：2019-05-07 22:33:46
【问题描述】：

我正在尝试为选项卡内的简单 div 设置动画。选项卡的内容是不同的组件。

父组件：

<div class="content p-24">
  <mat-tab-group dynamicHeight="true">
      <mat-tab label="Info">
        <app-profile-editor *ngIf="editProfile" [user]= "user"></app-profile-editor>
        <app-profile-viewer *ngIf="!editProfile" [user]= "user"></app-profile-viewer>
      </mat-tab>
      <mat-tab label="Companies">
        <app-profile-companies></app-profile-companies>
      </mat-tab>
      <mat-tab label="People">

      </mat-tab>

  </mat-tab-group>

当我单击该特定选项卡时，我想要实现的是为 app-profile-companies 组件中的 div 设置动画。我不太确定如何做到这一点，我还在学习，还不是 Angular 专家。

【问题讨论】：

我不确定这是否可行，但请尝试并告诉我。将mat-tab 的内容更改为模板ng-template 这样你的垫子标签是延迟加载的，因此动画应该在加载时出现（它们将在标签点击时加载）...more info here
它确实有效，但我几乎看不到它。每当我更改标签时，由于延迟加载，内容会出现口吃。

标签： angular angular-material angular-animations web-animations

【解决方案1】：

我通过为延迟加载添加 ng-template 并禁用选项卡滑动动画来解决此问题。

【讨论】：