現在、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-enter
とng-leave
がCSSの中でこれを使うことができるように見えましたが、私はそれらが段階的に廃止されたと言います。私はそれについて間違っている可能性があるので、もう少し研究をする必要があります。
ありがとうございました!
UPDATE(7.7.16):私はそれに戻ってくることにしました。そして、ページ読み込みアニメーションのタイミングを乱した後、動作しているように見えます。気づくにはアニメーションをおおよそ1000ms
する必要があります。 DOMが完全にロードされる前にアニメーションが実行され始めると思うような質問が出てきます。それはちょっと変わったようだ。 まだモバイルアニメーションの状況に取り組んでいます。私は公正なビットを混乱させ、それを動作させるように見えることができないので、私は現時点でGithubのレポに問題を提出するように見える。また、NG2のために動かないモバイルアニメーションの言及はないようです。
UPDATE(7.13.16):Angular2チームがRC5でリリースする予定の修正がいくつかありましたが、これは上記の懸案事項に対処する必要があります。私自身の質問に答えて終了するつもりです。