Angular - 頁面之間的動畫（更改路線之後）

我對Angular 2仍然很陌生，並且想知道是否有方法讓組件「飛入」並在切換路線時讓另一個組件「飛出」。假設我有兩個組件：Test1Component和Test2Component以及兩條指向它們的路線。什麼是最好的方法來做到這一點？Angular - 頁面之間的動畫（更改路線之後）

來源

2016-07-28 TheGuy

https://github.com/angular/angular/issues/9845#issuecomment-235799008

RC5 will hopefully be out this week, if not then next week.

For now (with RC5) you will need to do this for every component that is routed to and you want to add animations to:
@Component({ 
    host: { 
    '[@routeAnimation]': 'true' 
    }, 
    animations: [ 
     trigger('routeAnimation', [ 
     transition('* => void', animate(...)), 
     transition('void => *', animate(...)) 
     ]) 
    ] 
}) 
class Cmp { } 
Once we get query() and $variables into animations then you can use <router-outlet> with the URL API that I wrote above.

來源

2016-07-28 06:40:48

謝謝你，但你能告訴我如何正確綁定呢？它給了我這個錯誤：「不能綁定到'@routeAnimation'，因爲它不是一個已知的本地屬性」。 – TheGuy

我還沒有嘗試過動畫。你檢查了https://angular.io/docs/ts/latest/guide/animations.html嗎？ –

-1

我發現了大約在4.2角和高達路由動畫一個偉大的文章。

https://alligator.io/angular/animating-route-changes/?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_223

來源

2017-01-11 10:17:43

這是一個簡單的方法來做到這一點，但作爲性能價格昂貴，所以如果你有一個巨大的應用程序，我不會建議，也因爲'*'將應用程序的每一個元素的不透明度。順便說一句，選擇器應該是'* {}'沒有在前面的應用程序。 – mcmwhfy

Angular擁有自己的路由實現。他們配置和測試通過組件更改路線。這有很大的靈活性，當事情變得複雜一些時（比如子路由和子組件），這種解決方案就不足夠。 – Nicky

Angular - 頁面之間的動畫（更改路線之後）

回答

相關問題