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

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

0 голосов
/ 29 июня 2019

Когда пользователь посещает /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), это для *Компонент 1014 * и его анимация: 

`...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;
...}

Но не повезло, какие-либо идеи или рекомендации?

...