クリック2でアニメーションの角度2のマージンを増やす

Question

私は数週間前にangular2を使い始めました。 今日私はアニメーションにいくつか問題があります。私は、カルーセルのいくつかの種類をしたいが、どのように私は、角アニメーション状態を「再生」することができますイムわからない...

だからjQueryのでは、それはここのような非常にシンプルになります https://jsfiddle.net/o2gxgz9r/5157/

しかし、私はいけませんそれをどのように角度をもって行うか考えてください。 私は3つの状態をしようとしました：次、前とアイドル

私はボタンを "次へ"をクリックして次の状態に変更します。

しかし、アニメーションの後に状態をアイドルに設定すると、問題が始まります。要素はマージンをリセットし、元の位置に戻ります。

どのように私は角を伝えるべきですか？状態をアイドル状態に変更するにはどうすればよいですか？要素は同じ場所にとどまるべきですか？

多分、私は3つの州を必要としません - ただ2つ？ここで

は私の角度のコードのサンプルです：テンプレートの

パート：

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

マイcomponent.tsが

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

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

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

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

とコンポーネントのアニメーションデコレータ

@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')), 
]) 
    ], 
}) 

を提出します私はデコレータからステートアイドルを削除しようとしました。 このようにするか、マージンを増やしてCSSのトランジションを単純にしますか？

Answer 1

角度アニメーションを使用しない別の方法で解決しました。そこの答え

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'; 
} 

があると私は私のdivラッパーにいくつかのCSSを追加します。

transition: all 1s ease-in-out; 

しかし、それは正しい答えているのですか？