1

我正在尝试检测两个元素之间的冲突，并且在使用 css3translate3d而不是使用该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);
    }
}

关于这个错误的原因是什么的任何想法？

4

1 回答 1

1

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

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

这导致我在 Bootstrap中的 CSS 转换中间接收元素位置和 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);
    }
}
于 2014-07-01T13:23:56.000 回答