角路由器動畫計時錯誤

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.7秒」到「0.8秒」）我得到以下錯誤：

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重疊爲每個轉變不同。

我錯過了什麼？

Answer 1

我實際上可以讓你的動畫工作。爲了解決這些問題，我：

1. 刪除了嵌套組（你必須在定義單個動畫組的組）
2. 我明確定義的初始狀態你是動畫的每個屬性。如果您動畫translateX，我會在該元素的動畫頂部設置起始值。
3. 看起來像你的初始不透明度值都設置了錯誤的元素（即你發起它作爲1對:enter，然後進行動畫0上:leave

下面是修改後的轉變，對我的工作。

第一：

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

我有同樣的問題，這似乎是一個錯誤。重新排序轉換爲我解決了它。