如何在Angular.JS中創建icloud.com縮放效果

Question

新的icloud.com網站是最近發布的，它具有很好的效果，我想嘗試模仿我正在從事的項目。

如果您訪問https://www.icloud.com/#calendar並登錄，您會在短時間內看到加載的gif，然后日歷應用程序向外擴展到屏幕邊緣。

這是我對學習感興趣的內容：

• 您怎么稱這種效果？
• 有人可以討論如何在AngularJS（或類似框架）中實現這一機制，更具體地說，頁面結構，如何加載新內容，如何應用過渡等。
• 示例，鏈接或其他資源將不勝感激

Answer 1

不太確定如何調用此效果（可能輸入場景或比例），但快速瀏覽后，似乎該網站使用的是絕對定位，不透明度和-webkit-transform的混合。

如果您查看頁面，您會發現不透明度和-webkit-transform：scale（）都通過某些javascript函數增加了（似乎由javascript-packed.js的_calculateTransforms函數完成）。 在效果開始時，不透明度從0開始，以1結束。webkit-transform以scale（0.9）開始，以scale（1）結束。 請注意，動畫div已存在於DOM中，但在效果開始時不可見。

最后，我認為ngAnimate可能是模仿此效果的不錯選擇（有關更多詳細信息，請參見此處 ）