延迟检测与 translate3d 和 jQuery 的碰撞

Question

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

问题发生在：

• 铬（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);
    }
}

你知道这个错误的原因是什么吗？

Answer 1

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

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

这将我引向 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);
    }
}