使用translate3d和jQuery延迟检测碰撞

Question

我试图检测两个元素之间的碰撞，我在使用css3 translate3d而不是利用top属性时面临问题。

问题发生在:

• Chrome (35.0.1916.153 m)
• 歌剧(22.0.1471.70)

当使用translate3d时，检测碰撞有延迟。我使用setInterval与1毫秒的延时，以确保两个元素的位置几乎是实时监控。

在我的例子中，当检测到碰撞时，小正方形将变成黑色。正如你所看到的，延迟有时相当大，有时碰撞似乎在动画完成时被检测到。

修改top属性时工作正常:
http://jsfiddle.net/rHZbt/10/

使用translate3d代替移动元素时延迟:
http://jsfiddle.net/rHZbt/9/

这是我用jQuery检测碰撞的方式:

var interval = setInterval(function () {
    checkCollision();
}, 1);
function checkCollision() {
    var top = $('#element').offset().top;
    var bigBoxTop = $('#demo').offset().top + $('#demo').height();

    if (bigBoxTop >= top) {
        $('#element').css('background', 'black');
        clearInterval(interval);
    }
}

知道这个bug的原因是什么吗?

Answer 1

我发现jQuery在动画停止之前根本没有得到适当的信息，它得到的是"旧的"坐标。

这可以通过在chrome中运行web检查器并查看您的控制台来看到。http://jsfiddle.net/rHZbt/11/(顺便说一句，我已经缓存了您的选择器以获得更好的性能)。而与top一起工作的http://jsfiddle.net/rHZbt/12/在所有点都报告了正确的位置。

这导致我在CSS过渡的中间接收元素的位置和"强制回流";在Bootstrap的CSS过渡中，第一个注释的最后一个注释建议任何CSS更改基本上都会使其他CSS属性同步

。demo.css('visibility' , 'hidden').css('visibility' , 'visible');嘿，瞧，只要将demo.css('visibility' , 'visible');添加到checkCollision函数中就可以得到如下所示http://jsfiddle.net/rHZbt/13/

function checkCollision() {
    demo.css('visibility', 'visible');
    var top = element.offset().top;
    var bigBoxTop = demo.offset().top + demo.height();
    console.log(bigBoxTop, top);
    if (bigBoxTop >= top) {
        element.css('background', 'black');
        clearInterval(interval);
    }
}