Javascript 在维基百科上调整动画大小

如果在Chrome中转到a并按住ctrl+scrollup或ctrl+scrolldown键，则在动画中完成调整大小

这是如何实现的

（仅在FF中）

  Read
  View source
  View history

---

右上角的链接（动画）

如果您使用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;
}

---

这将平滑地设置

左边距

和

填充

属性的动画，Webkit在放大和缩小时似乎会修改这些属性。Firefox也应该有动画，但它没有。

Wikipedia在大多数浏览器中都没有动画，但动画仍在继续。第一条线索是每页正文上的

vector animate

类。他们的load.js文件（在每页底部调用）试图在用户放大和缩小时创建一个动画切换，但大多数浏览器（只有少数浏览器）不支持这种切换。它在大多数FF和IE版本中不起作用。 load JS文件可以在这里找到：

//bits.wikimedia.org/de.wikipedia.org/load.php？debug=false&；lang=de&；模块=站点&；仅=脚本&；皮肤=向量&*

此外，他们还使用一些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浏览器，这将获得相同的效果。有关这一点的参考文献已找到。正如您将注意到的，这个
transitions
CSS3属性还没有得到很好的支持

有关此属性支持的详细信息，请查看。
“Mouseup”的意思是“向上滚动”，这听起来像是您的操作系统或浏览器在为您放大和缩小。对我来说，它没有动画效果。随着缩放级别的调整，页面会有一点移动，但仅此而已。以下是字体大小（谷歌Chrome，因为缩放会调整其中的字体大小。）@qwertymk我答案上的第二个链接有很多例子，你可以尝试，包括一个移动的、改变颜色的方框（我个人最喜欢的）