如何使用 Angular 将动画设置为 Nebular Stepper，就像 Material 一样答案

【问题标题】：How to set an animation to Nebular Stepper with Angular as Material does it如何使用 Angular 将动画设置为 Nebular Stepper，就像 Material 一样
【发布时间】：2021-10-22 03:07:22
【问题描述】：

当您在 Angular Material 中从一个步骤更改为另一个步骤时，您会出现滑动效果，这可以使用 Nebular Stepper 实现吗？

我的意思是一个指令或一些简单的东西。

【问题讨论】：

标签： angular nebular stepper

【解决方案1】：

你只需要包装nb-step的内容。

在您的component.html上

<nb-stepper>
    <nb-step>
        <div class="wrap" [ngClass]="{'next': isNext, 'back':!isNext}">
        </div>
    </nb-step>
</nb-stepper>

在你的component.ts

  next(event: MouseEvent) {
    this.isNext = true;
    if (this.stepper?.steps.length === this.stepper?.selectedIndex) {
      this.stepper?.reset();
    } else {
      this.stepper?.next();
    }
  }

  back(event: MouseEvent) {
    this.isNext = false;
    if (this.stepper?.selectedIndex === 0) {
      this.stepper.selectedIndex = this.stepper?.steps.length - 1;
    } else {
      this.stepper?.previous();
    }
  }

在你的 scss 上component.scss:

.wrap.back {
    animation-name: slideRightToLeft;
    animation-duration: 1s;
}

.wrap.next {
    animation-name: slideLeftToRight;
    animation-duration: 1s;
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}

【讨论】：