使用translate3d和jQuery延遲檢測碰撞

Question

我試圖檢測兩個元素之間的碰撞，並且在使用css3 translate3d而不是使用top屬性時遇到問題。

問題發生在：

• 鉻（35.0.1916.153米）
• 歌劇（22.0.1471.70）

當使用translate3d有一個延遲檢測碰撞。我使用了setInterval，時間間隔爲1毫秒，以確保幾乎實時監測這兩個元素的位置。

在我的例子中，當檢測到碰撞時，小方塊會變黑。正如你所看到的，延遲有時非常大，有時碰撞似乎在動畫完成時被檢測到。

修改top屬性時正常工作：使用translate3d，而不是當移動元素
http://jsfiddle.net/rHZbt/10/

延遲：
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); 
    } 
}