html - 使用 CSS 动画缩放居中的 div 时的不稳定行为

Question

我有一个垂直 + 水平居中的 div，在使用 CSS 动画调整大小时显示不稳定、摇晃的运动。

div 是绝对定位的，具有固定的宽度/高度和负边距。

动画本身只是在两组不同的固定宽度/高度和负边距值之间切换，并设置了自定义过渡属性。

几乎感觉负边距正在以不同的宽度和高度速度动画。

我尝试过使用 jQuery animate() 而不是 css() 来更改使用的 CSS 转换(到线性、夸脱等)，但它们产生相同的结果结果。

有没有人能够解释为什么会发生这种情况，并且可能有更好的方法来做到这一点，前提是它适用于 IE >= 8？

示例:
http://jsfiddle.net/p4B3S/1/

HTML

<div class="outer">
    <div class="inner">
        +
    </div>
</div>
<button>toggle</button>​

CSS:

.outer {
    /* easeOutQuart */
    -webkit-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
       -moz-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
        -ms-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
         -o-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
            transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

    position: absolute;

    width: 200px;
    height: 200px;

    left: 50%;
    top: 50%;

    margin-left: -100px;
    margin-top: -100px;

    outline: 1px solid red;       
}

.inner {
    position: absolute;

    width: 40px;
    height: 40px;

    top: 50%;
    left: 50%;    

    margin-left: -20px;
    margin-top: -20px;

    text-align: center;

    line-height: 40px;

    outline: 1px solid blue;    
}

button {
    width: 100px;
    height: 50px;
}

jQuery

$button = $('button');
$outer = $('.outer');

$button.toggle(function() {
    $outer.css({
        'width': '100px',
        'height': '100px',
        'margin-left': '-50px',
        'margin-top': '-50px'
    });
}, function() {
    $outer.css({
        'width': '200px',
        'height': '200px',
        'margin-left': '-100px',
        'margin-top': '-100px'        
    });    
});

Answer 1

我没有代表可以简单地发表评论，所以我会在这里给你我的观察。 IE8.0.7601.17514 64 位上没有转换。它要么大要么小。当我的 FF11 以 1920x1080 和 1440x720 运行时，转换似乎完美无缺地工作，但是，当我使用 Web Developer Toolbar 插件调整屏幕大小时到 1280x720 并点击切换，红色框转换，蓝色框保持静止，黑色小十字准线在整个地方振动和弹跳；在 800x600 下，红色框正确过渡，但中间的蓝色框之前是静态振动，可以称为摇摇欲坠，在 640x480 下，所有东西都在振动和弹跳。基于此，我不得不推断它必须做使用您的 px 定义的尺寸和相对于屏幕尺寸/分辨率的固定位置，而不是其他任何东西。