Как анимировать компонент, выходящий из DOM, без использования анимации маршрутизатора в Angular?

Question

Когда пользователь посещает /team/signup им отображается форма для заполнения. Как только они заполняют форму и нажимают submitЯ хотел бы перевести компонент формы из DOM и компонент информации о переходе в. В настоящее время app-team-signup компонент содержит два дочерних компонента, app-team-signup-form а также app-information

У меня есть следующая структура шаблона внутри родительского компонента <app-team-signup>:

`<ng-container *ngIf="!(teamSignUpSubmitted$ | async); else info">
  <app-team-signup-form></app-team-signup-form>
</ng-container>

<ng-template #info>
  <app-information [teamSignUpForm]="teamSignUpForm"></app-information>
</ng-template>`

У меня есть следующий переход в обоих дочерних компонентов (app-team-signup-form а также app-information) это для<app-team-signup-form> компонент и его анимация:

`...animations: [
    trigger("infoAnimation", [
      transition(":enter", [
        query(".form-wrapper", [
          style({ opacity: 0, transform: "translateY(-3%)" }),
          animate(
            ".3s cubic-bezier(0.35, 0, 0.25, 1)",
            style({ opacity: 1, transform: "translateY(0%)" })
          )
        ])
      ])
    ])
  ]
})
export class TeamSignupFormComponent {
  @HostBinding("@infoAnimation")
  public animagePage = true; 
...}`

Очень похожая структура внутри <app-information> Шаблон компонента для его анимации.

Все работает очень хорошо, и обе анимации запускаются, когда пользователь нажимает submit кнопка на <app-team-signup-form> компонент, и анимация снова запускается, когда пользователь нажимает кнопку "Новая подача" на <app-information> составная часть.

Однако я также хочу анимировать уход каждого из двух дочерних компонентов (app-team-signup-form and app-information), Я не могу этого достичь.

Я попытался добавить следующее в родительском компоненте <app-team-signup>

animations: [
    trigger("signupAnimation", [
      transition(":leave", [
        style({ transform: "translateY(0%)", opacity: 1 }),
        animate(
          "4.3s cubic-bezier(0.35, 0, 0.25, 1)",
          style({ transform: "translateY(-3%)", opacity: 0 })
        )
      ])
    ])
  ]
})
export class TeamSignupComponent implements OnInit {
  @HostBinding("@signupAnimation")
  public animagePage = true;
...}

Но не повезло, есть идеи или рекомендации?