如何在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可能是模仿此效果的不错选择（有关更多详细信息，请参见此处 ）