javascript - 调整维基百科上的动画大小

Question

如果您在 Chrome 和 ctrl+scrollup 或 ctrl+scrolldown 中访问Wikipedia 页面，则调整大小是在动画中完成的。

这是如何实现的？

（在 FF 中只有

  Read
  View source
  View history

右上角的链接动画）

Answer 1

如果你用 Chrome 的 Inspector 检查 CSS，你会发现这条规则：

body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
  transition: margin-left 250ms,padding 250ms;
  -moz-transition: margin-left 250ms,padding 250ms;
  -webkit-transition: margin-left 250ms,padding 250ms;
  -o-transition: margin-left 250ms,padding 250ms;
}

margin-left这可以平滑地为和属性设置动画padding，Webkit 在放大和缩小时似乎会对其进行修改。Firefox 也应该动画，但它没有。

Answer 2

Wikipedia 在大多数浏览器中没有动画，但有动画试图继续。第一个线索是vector-animate每一页正文上的类。他们的 load.js 文件（在每个页面的底部调用）试图在用户放大和缩小时创建一个动画开关，但这在大多数浏览器中是不支持的（只有少数浏览器）。它不适用于大多数 FF 和 IE 版本。加载 JS 文件在这里找到：//bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

此外，他们还使用一些 CSS 来尝试对此进行动画处理：

body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}

对于 Webkit 浏览器，这将获得相同的效果。可在此处找到有关此的参考。正如您将注意到的，这个transitionsCSS3 属性还没有得到很好的支持。

有关此属性支持的更多信息，请查看此处。