Zoom与-transform scale的比较

Question

我在开发一个网站的缩放效果时遇到了这个问题。

当你为CSS伪状态设置过渡持续时间后，设置缩放属性会使元素在悬停时缩放，但一旦它达到最大尺寸，它就会缩小到一个较小的尺寸（但这个尺寸仍然比原来的大）。

然而，当使用相同的过渡和x-transform: scale()属性时，项目可以平滑地缩放（并且保持其中心坐标，我想补充说明一下）。

你可以在this fiddle中看到这一点。红色框向右下角增长，但然后跳回一个较小的大小，而蓝色框则平滑增长并保持完整大小。

为什么会这样呢？

*
{
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

box:hover
{
    zoom: 1.1;
}

box2:hover
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

- Liftoff

---

zoom: XXX; 可以缩放整个浏览器视口。CSS变换和过渡将由浏览器特殊处理。 - Adrian Preuss

“zoom”和“transform:scale”的工作方式不同。 “zoom”实际上缩放节点的大小，而“transform:scale”则缩放节点的视图大小。此外，如果我没记错，“zoom”只保证在IE中工作； Chrome之所以支持它，但其他浏览器不支持。 - Passerby

@路人甲 有趣。你能解释一下我描述的奇怪行为吗？节点会增长到大约是我输入的缩放比例的两倍大小（1.2而不是1.1），然后又缩小回我指定的大小。 - Liftoff

@David 我不太清楚那个... - Passerby

Answer 1

zoom不是支持的动画属性之一。

似乎发生的情况是这样的：光标进入红色框时，它立即假定zoom值的大小。然后transition开始工作，并在已经缩放的元素上第二次应用缩放。当过渡完成时，框会恢复到原始的zoom值。

通过在transitionend上使用警报来停止转换后的动画，我可以测量框的大小，并将其视为121px（100px * 1.1 * 1.1）。所以看起来zoom确实被应用了两次。

不知道为什么会出现这种行为，但由于它不是受支持的动画效果，因此没有真正的预期行为。

- Brett DeWoody