1

translate3d2 つの要素間の衝突を検出しようとしていますが、プロパティを使用する代わりにcss3 を使用すると問題に直面してい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 インスペクターを実行し、コンソールを見ると確認できます。 http://jsfiddle.net/rHZbt/11/ (ところで、パフォーマンスを向上させるためにセレクターをキャッシュしました)。一方、 http://jsfiddle.net/rHZbt/12/topは、すべてのポイントで正しい位置を報告して いました。

これにより、CSSトランジションの途中で要素の位置を受信し、Bootstrapの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 に答える