Angular 8实现多步骤注册表单仿轮播左右滑动动画的问题

第一步：调整动画触发器定义 #

你不需要维护两个独立的滑动触发器，直接借助Angular动画内置的:increment/:decrement转场别名，自动识别步骤增减的方向匹配对应动画：

import { trigger, transition, query, style, animate } from '@angular/animations';

@Component({
  // 其他组件配置省略
  animations: [
    trigger('slideCarousel', [
      // 步骤数值增加：点击下一步，新页面从右侧滑入，旧页面向左滑出
      transition(':increment', [
        query(':enter', [
          style({ transform: 'translateX(100%)', position: 'absolute', top: 0, left: 0, width: '100%' }),
          animate('200ms ease-in-out', style({ transform: 'translateX(0)' }))
        ], { optional: true }),
        query(':leave', [
          animate('200ms ease-in-out', style({ transform: 'translateX(-100%)' }))
        ], { optional: true })
      ]),
      // 步骤数值减少：点击上一步，新页面从左侧滑入，旧页面向右滑出
      transition(':decrement', [
        query(':enter', [
          style({ transform: 'translateX(-100%)', position: 'absolute', top: 0, left: 0, width: '100%' }),
          animate('200ms ease-in-out', style({ transform: 'translateX(0)' }))
        ], { optional: true }),
        query(':leave', [
          animate('200ms ease-in-out', style({ transform: 'translateX(100%)' }))
        ], { optional: true })
      ])
    ])
  ]
})
export class YourComponent {
  signingUpStep = 0;

  // 步骤切换方法示例，注意控制边界
  next() {
    if (this.signingUpStep < 2) this.signingUpStep++;
  }

  prev() {
    if (this.signingUpStep > 0) this.signingUpStep--;
  }
}

第二步：调整组件模板 #

把动画触发器绑定到父容器，直接用*ngIf控制步骤显隐即可，不需要给每个步骤单独绑定动画：

<!-- 父容器需要设置position: relative，保证步骤切换时定位正常 -->
<div style="position: relative; min-height: 300px" [@slideCarousel]="signingUpStep">
  <div *ngIf="signingUpStep === 0">
    <div>Step 0</div>
    <button (click)="next()">下一步</button>
  </div>
  <div *ngIf="signingUpStep === 1">
    <div>Step 1</div>
    <button (click)="prev()">上一步</button>
    <button (click)="next()">下一步</button>
  </div>
  <div *ngIf="signingUpStep === 2">
    <div>Step 2</div>
    <button (click)="prev()">上一步</button>
  </div>
</div>

注意事项 #

• 确保你已经在根模块中导入了BrowserAnimationsModule，否则动画不会生效
• 使用*ngIf而非[hidden]，可以保证元素在进入/离开DOM时正确触发对应的入场、退场动画
• 父容器的position: relative和子步骤的绝对定位是为了切换时两个步骤在同一层级重叠过渡，你可以根据自己的布局调整高度和定位逻辑

内容的提问来源于stack exchange，提问作者Grégory Huyghe