Angular 动画错误 - 减少没有初始值的空数组

Question

向组件添加动画时，控制台出现以下错误：

Reduce of empty array with no initial value

我的Angular版本：2.0.0

动画代码：

animations: [
    trigger('routerTransition', [
        state('void', style({ position: 'fixed', width: '100%' })),
        state('*', style({ position: 'fixed', width: '100%' })),
        transition(':enter', [
            style({ transform: 'translateX(100%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
        ]),
        transition(':leave', [
            style({ transform: 'translateX(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
        ])
    ])
]

错误：

Answer 1

事实证明，我使用的是 Angular 2.1.0 版中引入的新动画别名，我正在遵循 this 示例我没有意识到我的 Angular 版本不是与示例相同。

在深入了解调用堆栈后，我发现实际错误是：

the provided :enter is not of a supported format

如果在控制台中记录此错误会很有帮助。

升级到 Angular 2.1.0 解决了错误。

发行说明摘录：

Animation in Angular has been enhanced by adding :enter and :leave aliases for the common void => * and * => void state changes. The transition API documentation has been updated with these aliases.

Angular 动画错误 - 减少没有初始值的空数组

Angular animation error - Reduce of empty array with no initial value

angular

angular2-routing

angular2-animation