角度ルータのアニメーションタイミングエラー

Question

私は最近、ルート間のアニメーションを利用するために、角度アプリを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.8秒」に変更、すなわち「0.7s」）と同じになるように一つの遷移のタイミングを変更したとき次のエラー：stateChangeExpr各遷移について異なるよう

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" 

2つのアニメーションが重なってはなりません。

私には何が欠けていますか？

Answer 1

私は実際にあなたのアニメーションを動作させることができました。それらを修正するには、I：

1. ネストされたグループ（あなたは、単一のアニメーションを定義するグループ内のグループを持っている）
2. を削除し、私は明示的にアニメーション化されたすべてのプロパティの初期状態を定義しました。 translateXをアニメーション化した場合、その要素のアニメーションの先頭に開始値を設定します。
3. あなたの最初の不透明度の値が間違った要素（すなわち上で設定されたようにあなたが:leaveに0にアニメーション化、その後、:enterに1としてそれを開始ルックス

ここでは私のために働く改訂遷移である：。

まず：

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

Answer 2

私は同じ問題を抱えています。これはバグのようです。トランジションの並べ替えは、それを私のために修正しました。