1

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

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

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

几乎感觉负边距以不同的速度在宽度和高度上进行动画处理。

我尝试使用 jQueryanimate()而不是更改使用的 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'        
    });    
});
4

2 回答 2

0

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

于 2012-04-14T03:41:44.813 回答
0

我认为答案在于实现子像素值的舍入。

据我所知，Chrome 27.0 似乎没有这个问题，但对于大多数其他浏览器，我相信它仍然没有解决。

渲染引擎应该如何发挥这种行为并不是由 CSS 规范规定的，而是由实现来按照它认为合适的方式进行渲染。

上面的引述来自 John Resig，他在 subjet 上发表了一篇有趣的文章——以及关于这是否真的是一种理想的浏览器行为的激烈评论：http: //ejohn.org/blog/sub-pixel-problems-in-css/

于 2013-06-09T23:16:48.867 回答