如何在Angular.JS中创建icloud.com缩放效果

Question

最近发布了新的icloud.com网站，我想尝试模仿我正在进行的项目，效果很好。

如果您访问https://www.icloud.com/#calendar并登录，您会看到一段加载的GIF片刻，然后日历应用会向外缩放到屏幕边缘。

以下是我对学习感兴趣的内容：

• 你会怎么称呼这种效果？
• 有人可以讨论如何在AngularJS（或类似框架）中实现这一功能的机制，更具体地说，是页面结构，如何加载新内容，如何应用转换等等。
• 非常感谢示例，链接或其他资源

Answer 1

不太确定如何调用此效果（可能进入场景或缩放）但快速查看后，网站似乎使用了绝对定位，不透明度和-webkit-transform的混合。

如果你检查页面，你会看到opacity和-webkit-transform：scale（）都增加了一些javascript函数（看起来是由javascript-packed.js的_calculateTransforms函数完成的）。在效果开始时，不透明度从0开始，结束于1. webkit-transform以scale（0.9）开始，以scale（1）结束。请注意，动画div已经存在于DOM中，但在效果开始时不可见。

最后我认为ngAnimate可能是模仿这种效果的好候选人（详见here）