缩放与变换比例 [英] Zoom versus -transform scale

问题描述

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

I ran into this while developing a scaling effect onHover for one of my sites.

为CSS伪状态设置过渡时间时，设置zoom属性将缩放元素onHover，但是一旦达到最大大小，它就会缩小缩小到较小的尺寸（但此尺寸仍大于原始尺寸）。

When you have transition durations set for CSS pseudo states, setting the zoom property will scale the element onHover, but as soon as it reaches it's max size, it shrinks back down to a smaller size (but this size is still bigger than the original).

但是，当使用 x-transform：scale（）具有相同过渡的属性，该项目可以平滑缩放（并保持其中心坐标，我可能会添加）。

However, when using the x-transform: scale() property with the same transitions, the item scales smoothly (and maintains its center coordinate, I might add).

您可以在此小提琴。红色框向右和向下生长，然后跳回较小的尺寸，而蓝色框平稳地生长并保持完整尺寸。

You can see this in this fiddle. The red box grows to the right and down but then jumps back to a smaller size while the blue one smoothly grows and stays the full size.

为什么？ p>

Why is this?

*
{
    -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);
}

推荐答案

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

似乎正在发生的事情是：光标进入红色框，它立即假定 zoom 的大小值。然后开始执行过渡，并在已经缩放的元素上第二次应用缩放。过渡完成后，框将恢复为原始的 zoom 值。

What appears to be happening is this: The cursor enters the red box it instantly assumes the size of the zoom value. Then the transition kicks in and the zoom is applied for a 2nd time on the already-zoomed element. When the transition completes the box reverts to the original zoomvalue.

通过在过渡后停止动画（使用 transitionend 的警报我可以测量该框并看到它的宽度为121px（100px * 1.1 * 1.1），因此 zoom

By stopping the animation after the transition (using an alert on transitionend I can measure the box and see it has a width of 121px (100px * 1.1 * 1.1). So the zoom does appear to be getting applied twice.

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

No idea why it behaves like this but since it's not a supported animated effect there's not a really an expected behavior.

这篇关于缩放与变换比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！