angular - 角过渡动画ngIf：如何在：enter完成后触发：leave

Question

我将如何实现 :enter 动画以 0.25 秒的延迟开始？我不想在 :leave 完成后专门启动 :enter ，只需延迟 0.25 秒启动 :enter 。

当前实现的问题在于，在转换期间，两个选项卡内容都堆叠在另一个之下。

模板：

<div [@fadeContent] *ngIf="isActive1" class="content-wrapper">
  <ng-content></ng-content>
</div>
<div [@fadeContent] *ngIf="isActive2" class="content-wrapper">
  <ng-content></ng-content>
</div>

角组件动画：

@Component({
  selector: 'tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.scss'],
  animations: [
    trigger('fadeContent', [
      transition(':leave', [
        animate('0.25s', style({opacity: 0}))
      ]),
      transition(':enter', [
        style({opacity: 0}),
        animate('0.25s', style({opacity: 1}))
      ]),
    ])
  ]
})

标签： angularangular-animations