角度2動畫未按預期工作

我正在使用角度2 rc6，我希望根據路徑路徑進行頁面轉換。我在兩條路徑上應用以下動畫（作爲測試）。我只是想讓不透明度變成動畫而沒有別的。但無論我做什麼，我都無法停止翻譯Y軸上的頁面。我發現似乎可行的唯一選擇是使用style.position: absolute作爲主機。我不想使用它來鎖定頁面上所有元素的位置。我也試過opactiy，沒有transform。那也行不通。角度2動畫未按預期工作

host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 

     transition('void => *', [ 
     style({opacity: 0, transform: 'translatey(0)'}), 
     animate('0.2s') 
     ]), 
     transition('* => void', [ 
     animate('0.2s', style({opacity: 0, transform: 'translatey(0)'})) 
     ]) 
    ]) 
    ]

我相信我在這裏錯過了一些東西。不太確定什麼？謝謝您的幫助。

來源

2016-09-18 andthereitgoes

您是否找到答案？ – Leukonoe

還沒有。當我這樣做時，我一定會在這裏更新它。 – andthereitgoes

1）正如你可以看到你拼寫錯誤transteY變換X或Y的值

style({opacity: 0, transform: 'translatey(0)'}),

應該大寫像這樣：

style({opacity: 0, transform: 'translateY(0)'}),

2）另一件事我看到在你的代碼中，你綁定了你的動畫選擇器，如下所示：[@routeAnimation]': 'true'如果你在你的html中完全像這樣使用了這個選擇器，你就不能通過切換布爾值來打開它，例如嘗試使用布爾類型isMovingY = 'false' d現在將它放在選擇器中，例如[@routeAnimation]': isMovingY現在當您通過點擊切換時，它可以激活您在動畫中聲明的「輸入」/「離開」狀態。

來源

2016-12-23 15:14:16

角度2動畫未按預期工作

回答

相關問題