Question

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

问题发生在：

Chrome（35.0.1916.153 m）
Opera（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检查器并查看控制台来看到。 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);
    }
}

延迟检测与translate3d和jQuery的冲突

1 个答案: