Question

在Chrome或Safari上打开this page并调整缩放级别。当你改变缩放级别时，你会注意到它的元素有一个可爱的缓动效果。

显然这仅适用于Chrome和Safari（webkit？），但这是如何完成的？是否有跨浏览器的方式来做到这一点？

Answer 1

我明白了。不涉及JavaScript，它是纯CSS。

即webkit的-webkit-transition属性：

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

编辑：经过进一步研究，我发现大多数浏览器（即：IE以外的所有浏览器）都支持供应商特定的transition CSS属性。但是，只有webkit浏览器在调整页面大小时才会使用转换。

参见jsfiddle

上的演示

Answer 2

我不认为有任何（跨浏览器）直接听取页面缩放事件的方式。在Catch browser's "zoom" event in JavaScript上描述了一些后门。但我认为你可以听Ctrl + + / -或Ctrl + Mouse Wheel事件。

如何检测缩放级别的变化？

2 个答案:

参见jsfiddle