我最近将我的 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
都不同。
我错过了什么?
最佳答案
我实际上能够让您的动画正常工作。为了修复它们,我:
- 删除了嵌套组(您在定义单个动画的组中有组)
- 我为您设置动画的每个属性明确定义了一个初始状态。如果您为
translateX
设置动画,我会在该元素的动画顶部设置起始值。 - 看起来您的初始不透明度值设置在错误的元素上(即您在
:enter
上将其设置为 1,然后在:leave
上设置为 0。<
以下是对我有用的修改后的过渡:
首先:
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(100%)' })),
group([
query(':leave',
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
style({ transform: 'translateX(-100%)', opacity:0 }))
),
query(':enter',
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
style({ transform: 'translateX(0%)' }))
)
])
第二个:
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(-100%)' })),
group([
query(':leave',
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
style({ transform: 'translateX(100%)', opacity:0 }))
),
query(':enter',
animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
style({ transform: 'translateX(0%)' }))
)
])
关于Angular Router 动画计时错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44552621/