CSS遷移によるHTML要素の移動の検出

Question

私のページにはFlash要素があります.Flashは一般に非常に繊細であるため、整数ピクセル値に配置する必要があります（詳しくは、Flash webcam access request prompt unresponsiveを参照してください）。

私はobjectにposition:absoluteを設定し、そして含むdivの丸いoffsetにleftとtopを設定するためにはjQueryを使用して、divでobjectをラップすることによってこれを実現しています。

（上記のコードは間違いがある場合、それはちょうどそれを伐採からだ）

<div id="wrapper"> 
    <object id="flash" blah style="position:absolute"> 
     <!-- blah --> 
    </object> 
</div> 
<script> 
    function update(){ 
     var p=$('#wrapper').offset(); 
     $('#flash').css({'left':Math.round(p.left),'top':Math.round(p.top)}); 
    } 
    $(document).ready(function(){ 
     $(window).resize(update); 
     update(); 
    }); 
</script> 

そして、すべてが素晴らしい作品というときの位置を更新すること：それはここでは、コード形式であり、一口ましたブラウザのサイズが変更され、一部のJavaScriptによって位置が変更されたときに更新するのは簡単ですが、CSS transition-durationを使用して変更をアニメーション化します。これをどのように検出できますか？少なくとも、オブジェクトに影響を与えるトランジションがいつ起きているかを検出し、いつ停止するかを知りたいと思います。理想的には、（フォントサイズの変更や画像の読み込みなどによって）どのように動きをキャッチするかを知りたいと思っています。

Answer 1

あなたはこのフィドルをチェックすることができ：http://jsfiddle.net/DpYNm/ をそれは運動が開始され、終了時に、私はそれはあなたの問題を解決だかどうかわからないんだけど、それだけで正しい方向にあなたを助けるかもしれないログに記録します！

function checkForMove() { 
if ($('#testDiv').prop('user_default_width') === undefined) { 
    $('#testDiv').prop('user_default_width', $('#testDiv').width()); 
    $('#testDiv').prop('user_is_moving', false); 
} 

if ($('#testDiv').width() != $('#testDiv').prop('user_default_width') && !$('#testDiv').prop('user_is_moving')) { 
    $('#log').html($('#log').html() + "Move started<br/>"); 
    $('#testDiv').prop('user_is_moving', true); 
} 
if ($('#testDiv').width() == $('#testDiv').prop('user_default_width') && $('#testDiv').prop('user_is_moving')) { 
    $('#log').html($('#log').html() + "Move ended<br/>"); 
    $('#testDiv').prop('user_is_moving', false); 
} 

setTimeout(checkForMove, 1); 

}

checkForMove(); 

checkForMoveは、すべてのMSと呼ばれ、最初の呼び出しでは、プロパティにdiv要素の幅を節約します。変更（移行の開始）のたびにヘルパープロパティをログに記録して保存し、移行がデフォルトサイズに戻るまで再度ログに記録しないようにします。私はあなたのニーズに合わせてその部分を変更できると確信しています！ :)