Angular Router 动画计时错误答案

【问题标题】：Angular Router animation timing errorsAngular Router 动画计时错误
【发布时间】：2017-06-14 18:57:25
【问题描述】：

我最近将我的 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 都不同。

我错过了什么？

【问题讨论】：

标签： angular angular-animations angular-router

【解决方案1】：

我实际上能够让您的动画正常工作。为了修复它们，我：

删除了嵌套组（组中的组定义了单个动画）
我为您正在制作动画的每个属性明确定义了一个初始状态。如果您为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%)' }))
  )
])

【讨论】：

【解决方案2】：

我有同样的问题，这似乎是一个错误。重新排序转换为我修复了它。

【讨论】：