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