角度 - ページ間のアニメーション（経路変更後）

私はまだAngular 2を初めて使っていて、経路を切り替えるときにコンポーネントを「飛び込ませる」方法と、別のコンポーネントを飛ばす方法があるのだろうかと思っていました。 Test1ComponentとTest2Componentの2つのコンポーネントと、それぞれを指す2つのルートがあるとします。それをする最善の方法は何でしょうか？角度 - ページ間のアニメーション（経路変更後）

出典

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

これは簡単な方法ですが、パフォーマンスとしては高価ですので、巨大なアプリケーションを使用している場合は、「*」がその不透明度をアプリケーションのすべての要素に適用するため、お勧めしません。 btwセレクタはアプリなしで '* {}'にする必要があります。 – mcmwhfy

Angularには独自のルーティング実装があります。これらは、コンポーネントを介して変更されたルートに対して構成され、テストされます。柔軟性が十分にあり、状況が少し複雑になると（サブルートやサブコンポーネントのように）、この解決策では十分ではありません。 – Nicky

角度 - ページ間のアニメーション（経路変更後）

答えて

関連する問題