角度动画错误 - 减少没有初始值的空数组答案

【问题标题】：Angular animation error - Reduce of empty array with no initial value角度动画错误 - 减少没有初始值的空数组
【发布时间】：2016-12-20 17:27:41
【问题描述】：

向组件添加动画时，我在控制台中收到以下错误：

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%)' }))
        ])
    ])
]

错误：

【问题讨论】：

标签： angular angular2-routing angular2-animation

【解决方案1】：

原来我使用的是 Angular 2.1.0 版中引入的新动画别名，我在关注 this 示例我没有意识到我的 Angular 版本与示例中的不同。

通过调用堆栈挖掘后，我发现实际的错误是：

the provided :enter is not of a supported format

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

升级到 Angular 2.1.0 解决了该错误。

从发行说明中摘录：

Angular 中的动画已通过为常见的 void => * 和 * => void 状态更改添加 :enter 和 :leave 别名而得到增强。转换 API 文档已使用这些别名进行了更新。

【讨论】：