angular2-animation - 角度 2 动画组错误仅适用于 2 最后一个动画

Question

我正在尝试为 X 和 Y 方向上的按钮设置动画，通过 4 步使用不同的时间配置和组动画，但发现只有最后两个动画有效！它忽略了前 2 个动画。为什么会这样？我做错了什么？谢谢！

组件代码：

 <button [@myAnimate]="myState"
        (click)="updateMyState()">
    myTransfrom
</button>

ts代码：

animations: [
        trigger('myAnimate', [
            state('first', style({ color: 'blue' })),
            state('second', style({ color: 'red' })),
            transition('first <=> second',
                [
                group([
                        animate('1s ease', style({
                            transform: 'translateX(0%) translateY(100%)' 
                        }))
                        , animate('1s 1s ease', style({
                            transform: 'translateX(-100%) translateY(100%)'
                    }))
                        , animate('1s 2s ease', style({
                            transform: 'translateX(100%) translateY(100%)'
                        }))
                        , animate('1s 3s ease', style({
                            transform: 'translateX(0%) translateY(100%)'
                    }))
                        , animate('1s 4s ease', style({
                            transform: 'translateX(0%) translateY(200%)'
                    }))
            ])
            ]
    )])]