2016-07-01 12 views
6

現在、animationsコンポーネントで作成されたng2を使用して、Angular2サイトにアニメーションを実装しようとしています。これまでは、ドキュメントに提供されているAngular 2 Developer Guide - Animationsに取り組んできました。しかし、私はいくつかの質問にぶつかりましたが、私はSOコミュニティが助けてくれることを望んでいました。私が最初に抱く問題/問題は、(私が話すことのできる)アニメーションがページの読み込み。ビューに切り替えてアニメーションのビューに戻すと、完璧に動作しているようです。これは私が現在、問題のアニメーションのために使っていたコードである(必要であれば、私は、全体のコンポーネントを提供することができます):私はAngular2アニメーションロード時およびページ移動時

animations: [ 
    trigger('kissState', [ 
    state('in', style({opacity: 1})), 
    transition('void => *', [ 
     style({opacity: 0}), 
     animate('250ms ease-in-out') 
    ]), 
    transition('* => void', [ 
     animate('250ms ease-in-out', style({opacity: 0})) 
    ]) 
    ]) 
] 

void => *opacity:0に私のDOM要素を設定しますという印象の下にあった、それいったんビューにinを入力した場合、opacity:1となります。私が持っていると思われるもう一つの問題は、私のナビゲーションがモバイルで動作していないように見えるということです。私はまだサーバーに移動していませんが、現地で開発し、ノード経由で携帯端末を見ていますlocaltunnelアニメーションがないようです。これは、奇妙な方法localtunnelが動作するので、実際のサーバで真にテストできるようになるまで、あまりにもひどく心配しているわけではないからです。ルータビューの

animations: [ 
    trigger('offScreenMenu', [ 
    state('inactive', style({ 
     opacity: 0, 
     zIndex: -10 
    })), 
    state('active', style({ 
     backgroundColor: 'rgba(255, 255, 255, 0.8)', 
     zIndex: 10 
     })), 
    transition('inactive => active', animate('250ms ease-in')), 
    transition('active => inactive', animate('250ms ease-out')) 
    ]) 
] 

Angular2チームによる既知の問題で、私が持ってきた最後の一つの問題は、アニメーション:ここで私はそれが私のモバイルデバイス上で動作していないに気づいたときに、特定であることを他のアニメーションです変化する。現在のところ、これに対処するSO questionがあり、Angular2リポジトリのチケット(SO質問のGünterZöchbauerによるコメントに記載されています)があります。それで、現在の回避策があれば私は興味がありましたか?いくつかの簡単な調査を通じて、ある時点でng-enterng-leaveがCSSの中でこれを使うことができるように見えましたが、私はそれらが段階的に廃止されたと言います。私はそれについて間違っている可能性があるので、もう少し研究をする必要があります。

ありがとうございました!

UPDATE(7.7.16):私はそれに戻ってくることにしました。そして、ページ読み込みアニメーションのタイミングを乱した後、動作しているように見えます。気づくにはアニメーションをおおよそ1000msする必要があります。 DOMが完全にロードされる前にアニメーションが実行され始めると思うような質問が出てきます。それはちょっと変わったようだ。 まだモバイルアニメーションの状況に取り組んでいます。私は公正なビットを混乱させ、それを動作させるように見えることができないので、私は現時点でGithubのレポに問題を提出するように見える。また、NG2のために動かないモバイルアニメーションの言及はないようです。

UPDATE(7.13.16):Angular2チームがRC5でリリースする予定の修正がいくつかありましたが、これは上記の懸案事項に対処する必要があります。私自身の質問に答えて終了するつもりです。

答えて

3

この質問を閉じるに行く。上記の問題のほとんどは、Angular2のRC5で解決されたようです。これまで待っていた試合のように見えます。ここで角度レポでそれぞれ発行/ PRSのへのリンクです:

要素は、ページの読み込み前にanimatingたことが私の直感は正しかったと、このPRで解決されています:https://github.com/angular/angular/pull/9887

RC5は、アニメーションを可能にするために修正が含まれていますこのPR:https://github.com/angular/angular/pull/9933を経由して経路を変更すると、最終的にNG2はアニメーションのためにquery()の機能を許可します(この点に関してはhereが多く見つかります)。

モバイルに関する問題については、私はまだモバイルデバイス(つまり、プランカー内)でバグを作り直す方法を見つけようとしていますが、これまでに失敗しています。しかし、私のウェブサイトではbreakingの問題ではありません。

1

角度2最終溶液

我々はplunkが含まれて私の前の回答hereごとにこれを達成するために@routeAnimationビルトインディレクティブを使用することができます。

関連する問題