Question

我正在尝试在离开时为查询的元素实现退出左交错动画。我让动画在进入时工作，但不在休假中。

动画用于多输入步进器。当用户进行下一步时，标题和副标题应左移。随着新步骤的到来，标题和字幕从右错列进入。

这是我当前的代码。

组件文件

     animations: [
      trigger('easeInLeftStaggered', [
        transition('* => *', [
          query('p.title, p.subtitle', [
            style({opacity: 0, transform: 'translateX(100px)'}),
            stagger(95, [
              animate('250ms ease-in', style({ opacity: 1, transform: 'none' }))
            ])
          ])
        ])
      ])
    ]

export class RegistrationFirstNameMobileComponent implements {
    @HostBinding('@easeInLeftStaggered')

模板文件


<div class="registration-input">
  <div class="registration-input-above">
      <span style="position: relative;">
        <ng-content></ng-content>
      </span>
      <p class="title">{{title}}</p>
      <p class="subtitle" [innerHtml]="subtitle"></p>
      <div class="progress-bar"></div>
  </div>
  <div class="registration-input-below" [formGroup]="form">
        <div  class="next-button fullscreen-button">
            <app-button
              (click)="nextButtonClicked()"
            </app-button>
        </div>
    </div>
</div>

当用户单击nextButtonClicked()时，将在表单上显示下一步，在本例中为“姓氏”。 p.title和p.subtitle元素是需要输入和退出动画的元素。

退出动画应使p.title和p.subtitle元素以错开的动画向左退出。

我在文档中看到了:enter和:leave，但是我正在努力实现它。我相信我对* => *的使用是问题所在，但无法弄清楚。任何帮助表示赞赏。

角度交错动画如何在离开/退出时反转动画？

0 个答案: