Question

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

当您为CSS伪状态设置转换持续时间时，设置缩放属性将缩放元素onHover，但是一旦达到它的最大尺寸，它就会缩小到更小的尺寸（但是这个尺寸仍然大于原文）。

但是，当使用具有相同过渡的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);
}

Answer 1

zoom不是supported animated properties之一。

似乎正在发生的事情是：光标进入红色框，它立即采用zoom值的大小。然后transition启动并在已经缩放的元素上第二次应用缩放。转换完成后，该框将恢复为原始zoom值。

通过在转换后停止动画（使用transitionend上的警报我可以测量该框并看到它的宽度为121px（100px * 1.1 * 1.1）。所以zoom确实会出现被申请两次。

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

缩放vs转换比例

1 个答案: