Angular 2多步動畫

Question

我很好奇是否可以使用角度2做多步動畫。我創建了一個基本的動畫，其中點擊按鈕時我的按鈕向右滑動。不過，我想知道我是否能夠讓buttom正確移動，然後移動，或者更多的移動。我曾嘗試，但收效甚微以下...

state('active', style({ 
    backgroundColor:'blue', 
    transform: ' translatey(100%) translatex(100%) ' 
})), 

這基本上使箱斜走，因爲這兩個轉換都在同一時間觸發。我希望它一次翻一步。任何方向或幫助都會很棒。謝謝！

編輯

按照要求plunker

Answer 1

下面是用該溶液plunker：

https://plnkr.co/edit/ulE79CSzuxE6DgMshT3W?p=preview

Answer 2

做，在角將使用關鍵幀的方式。

export const move = trigger('move' , [ 
    state('start', style({ transform: 'translate(0px,0px)' })), 
    state('end', style({ transform: 'translate(0px,20px)' })), 
    transition('start => end', animate('2s ease-in-out', keyframes([ 
     style({transform: 'translate(0px,0px)', offset: 0 }), 
     style({transform: 'translate(0px,20px)', offset: 0.4 }), 
     style({transform: 'translate(20px,20px)', offset: 0.8 }), 
     style({transform: 'translate(0px,20px)', offset: 1 }) 
    ]) 
)), 
    transition('end => start', animate('2s ease-in-out', keyframes([ 
     style({transform: 'translate(0px,20px)', offset: 0 }), 
     style({transform: 'translate(20px,20px)', offset: 0.4 }), 
     style({transform: 'translate(0px,20px)', offset: 0.8 }), 
     style({transform: 'translate(0px,0px)', offset: 1 }) 
    ]) 
)) 
]); 

Plunker