0

新しい icloud.com サイトが最近リリースされ、私が取り組んでいるプロジェクトで試して真似したい素晴らしい効果があります。

https://www.icloud.com/#calendarにアクセスしてログインすると、読み込み中の gif が一瞬表示され、カレンダー アプリが画面の端まで拡大されます。

私が学びたいと思っていることは次のとおりです。

  • この効果を何と呼びますか？
  • これを AngularJS (または同様のフレームワーク) で実装する方法、より具体的には、ページ構造、新しいコンテンツのロード方法、トランジションの適用方法などについて誰かが議論できますか?
  • 例、リンク、またはその他のリソースをいただければ幸いです
4

1 に答える 1

0

この効果を呼び出す方法はよくわかりませんが (シーンに入るかスケールするか)、ざっと見てみると、Web サイトは絶対配置、不透明度、および -webkit-transform を組み合わせて使用​​しているように見えます。

ページを調べると、不透明度と -webkit-transform:scale() の両方が何らかの JavaScript 関数でインクリメントされていることがわかります (javascript-packed.js の _calculateTransforms 関数によって行われるようです)。エフェクトの開始時、不透明度は 0 で始まり、1 で終わります。webkit-transform は、スケール (0.9) で始まり、スケール (1) で終わります。アニメーション化された div は既に DOM に存在しますが、効果が開始されると非表示になることに注意してください。

最後に、ngAnimate はこの効果を模倣する良い候補になると思います (詳細については、こちらを参照してください)。

于 2013-09-25T18:36:32.790 に答える