Angular 2在點擊動畫時增加邊距

幾周前我開始使用angular2。今天我有一些動畫問題。我想要做一些旋轉木馬的，但林不知道我如何能「玩」的角度動畫狀態...Angular 2在點擊動畫時增加邊距

所以jQuery中這將是非常簡單的喜歡這裏： https://jsfiddle.net/o2gxgz9r/5157/

但我不有想法如何在角度上做到這一點。我試圖做3個狀態：下一步，上一步和空閒

所以在按鈕「下一步」點擊im改變狀態到下一個 - 一切都很好，因爲它的動畫。

但問題出現在動畫後，我將狀態設置爲空閒 - 元素重置邊距並返回原始位置。

我該如何告訴角度 - 將狀態更改爲空閒，但元素應該保持在同一個地方？

也許我不需要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')), 
]) 
    ], 
})

我al所以試圖從裝飾器中刪除狀態空閒。我應該這樣做，還是僅僅通過增加利潤和css轉換來做到這一點？

來源

2017-04-06 Mateusz Kudej

我以另一種方式解決了它 - 沒有角動畫。有一個答案

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

我添加一些CSS來我的div包裝：

transition: all 1s ease-in-out;

但它是一個正確的答案？

來源

2017-04-06 14:32:22

Angular 2在點擊動畫時增加邊距

回答

相關問題