jquery - 使用 translate3d 和 jQuery 延迟检测碰撞

Question

我正在尝试检测两个元素之间的碰撞，但在使用 css3 translate3d 而不是使用 top 属性时我遇到了问题。

问题发生在:

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

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

在我的示例中，当检测到碰撞时，小方 block 将变为黑色。如您所见，有时延迟很大，有时似乎在动画结束时检测到碰撞。

修改 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);
    }
}

关于这个错误的原因有什么想法吗？

Answer 1

我发现 jQuery 在动画停止之前根本没有获得适当的信息，它正在获取“旧”坐标。

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

这引导我到 Receiving elements position in the middle of CSS transition和 "Force Reflow" in CSS transitions in Bootstrap第一条中的最后一条评论表明任何 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);
    }
}