我最近将我的 Angular 应用程序更新到 4.0,以便利用路线之间的动画。
下面是我的动画功能:
export function routerTransition() {
return trigger('routerAnimations', [
transition('home => development, design => home', [
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ zIndex: 100 })),
query(':enter', style({ transform: 'translateX(100%)', opacity:1 })),
group([
query(':leave', group([
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(-100%)', opacity:0 }))
])),
query(':enter', group([
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
]))
])
]),
transition('home => design, development => home', [
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ zIndex: 100 })),
query(':enter', style({ transform: 'translateX(-100%)', opacity:1 })),
group([
query(':leave', group([
animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(100%)', opacity:0 }))
])),
query(':enter', group([
animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
]))
])
])
])
}
出于某种原因,当我将一个转换的时间更改为与另一个相同(即将“0.7s”更改为“0.8s”)时,我收到以下错误:
The CSS property "transform" that exists between the times of "0ms" and "800ms" is also being animated in a parallel animation between the times of "0ms" and "800ms"
这两个动画不应重叠,stateChangeExpr
因为每个过渡的动画都不同。
我错过了什么?