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

但是没有运气，有什么想法或建议吗？

如何在不使用Angular中的路由器动画的情况下为离开DOM的组件设置动画？

0 个答案: