如何像 Material 那样使用 Angular 将动画设置为 Nebular Stepper

Question

当您在 Angular Material 中从一个步骤切换到另一个步骤时，您会产生滑动效果，这可以用 Nebular Stepper 实现吗？

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

Answer 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);
    }
}

如何像 Material 那样使用 Angular 将动画设置为 Nebular Stepper

How to set an animation to Nebular Stepper with Angular as Material does it

angular

stepper

nebular