Угловая 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