Angular 2 increase margin in animation on click

Question

I started using angular2 some weeks ago. Today I have some problem with animations. I want to do some kind of carousel, but im not sure how can i "play" with angular animation states...

So in jQuery it will be very simple like here: https://jsfiddle.net/o2gxgz9r/5157/

But i dont have idea how to do it on angular. I tried to do 3 states: next, prev and idle

So on button "next" click im changing state to next - everything is fine because its animating.

But problem starts when after animation I set state to Idle - elements reset margin and back to orginal position.

How should I tell angular - to change state to idle but element should stay in same place?

Maybe I dont need 3 states - just only 2?

Here is sample of my angular code:

Part of template:

<div id="room-compare-slider" #roomSlider [@slider]="sliderState" (@slider.done)="animationDone($event)">some content</div>

My component.ts file

sliderState: 'prev' | 'next' | 'void';

ngOnInit() {
   this.sliderState = 'void';
}

animnateNext() {
   this.sliderState = 'next';
}

animationDone() {
   this.sliderState = 'void';
}

And component animation decorator

@Component({
  selector: 'app-room-compare',
  templateUrl: './room-compare.component.html',
  styleUrls: ['./room-compare.component.css'],
  animations: [
trigger('slider', [
  state('prev',
    style({
      marginLeft: 0
    })),
  state('void',
    style({
      marginLeft: '*'
    })),
  state('next',
    style({
      marginLeft: -200
    })),
  transition('* => *', animate('0.2s, linear')),
])
  ],
})

I also tried to remove state idle from decorator. Should I do it like this, or just do it simple with margin increase and css transitions?

Answer 1

I solved it in another way - without angular animations. There is an answer

animnateNext(){
   let currentMargin = parseInt(this.roomSlider.nativeElement.style.marginLeft);

   if(isNaN(currentMargin)){
     currentMargin = 0;
   }

   let newMargin = currentMargin - 275;  
   this.roomSlider.nativeElement.style.marginLeft = newMargin+'px';
}

And I add some css to my div wrapper:

transition: all 1s ease-in-out;

But is it a right answer ?