0

新的 icloud.com 网站最近发布了，我想在我正在做的一个项目中尝试和模仿一个简洁的效果。

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

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

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

1 回答 1

0

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

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

最后，我认为 ngAnimate 可能是模仿这种效果的一个很好的候选者（有关更多详细信息，请参见此处）

于 2013-09-25T18:36:32.790 回答