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

Question

When you change from one step to another in Angular Material you have a slide effect, is this possible with Nebular Stepper?

I mean a directive or something simple.

1. Angular material Example
2. Javascript vanilla from scratch

Answer 1

You just need to wrap the content of the nb-step.

On your component.html

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

On your 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();
    }
  }

On your 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);
    }
}