Angular 8 animation slide left and right like carousel

Question

I have a problem to create a sort of carousel with Angular animations. It is for a signing up form with different steps. When you go to the next step, it has to slide from the right, when you go back, it slides from the left.

I didn't manage to create a plnkr example, impossible to import Angular animations, sorry.

Here a basic code to give you an idea of what I'm looking for:

animations: [
trigger('slideRight', [
  state('in', style({ transform: 'translateX(0%)' })),
  state('out', style({ transform: 'translateX(+100%)' })),
  transition('in <=> out', animate('200ms ease-in')),
  transition('out <=> in', animate('200ms ease-in-out'))
]),
trigger('slideLeft', [
  state('in', style({ transform: 'translateX(0%)' })),
  state('out', style({ transform: 'translateX(-100%)' })),
  transition('in <=> out', animate('200ms ease-in')),
  transition('out <=> in', animate('200ms ease-in-out'))
])
]

signingUpStep: 0;


<div>
  <div [hidden]="signingUpStep != 0" [@slideLeft]="signingUpStep == 0 ? 'in' : 'out'">
    <div>Step 0</div>
  </div>
  <div [hidden]="signingUpStep != 1" [@slideRight]="signingUpStep == 1 ? 'in' : 'out'">
    <div>Step 1</div>
  </div>
  <div [hidden]="signingUpStep != 2" [@slideRight]="signingUpStep == 2 ? 'in' : 'out'">
    <div>Step 2</div>
  </div>
</div>

My problem is with:

<div [hidden]="signingUpStep != 1" [@slideRight]="signingUpStep == 1 ? 'in' : 'out'">
    <div>Step 1</div>
</div>

It always uses [@slideRight] animation whereas I would like it to indeed use [@slideRight] when the user comes from signingUpStep == 0, but use [@slideLeft] when the user comes from signingUpStep == 2.

Like the middle div signingUpStep == 1 was in the middle of a carousel.

I read about :increment and :decrement but I'm not sure about how to use them.

I also tried to used the params but it doesn't work like I want. I need to be able to dynamically change the params depending upon the user position in the slide.

Thank you.

Answer 1

I have a similar problem and managed to do it with only one animation trigger using a parameter:

 trigger('slideInOut', [
  transition(':enter', [
    style({ transform: 'translateX({{direction}}%)' }),
    animate('400ms ease-in', style({ transform: 'translateX(0%)' })),
  ]),
])

and on the template ( it's a data carousel, so I change the direction on navigation from Right to Left to Left to Right ) :

 <div class="envolvido"
 *ngFor="let envolvido of itensPaginaAtual; index as indexOfelement"
 [@slideInOut]="{ value: '', 
 params: { direction: this.direction === 'RL' ? '100' : '-100' } }"
>