Cuando cambias de un paso a otro en Angular Material tienes un efecto de deslizamiento, ¿es esto posible con Nebular Stepper?
Me refiero a una directiva o algo simple.
Solo necesita envolver el contenido del nb-step .
En su component.html
<nb-stepper> <nb-step> <div class="wrap" [ngClass]="{'next': isNext, 'back':!isNext}"> </div> </nb-step> </nb-stepper> En su 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(); } } En su component.scss scss.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); } }