CSS geçişlerinin neden olduğu HTML öğesinin hareketini algıla

Question

Sayfanın bir Flash öğem var ve Flash genellikle oldukça hassas olduğundan, tamsayı piksel değerlerine göre konumlandırılmalıdır (ayrıntılar istiyorsanız, bkz Flash webcam access request prompt unresponsive).

Ben bir div içinde object sarma object üzerine position:absolute ayarlama ve içerikli div ait yuvarlanmış offset için left ve top ayarlamak için jQuery kullanarak bu elde ediyorum. Bu bir lokma oldu, işte kodu biçiminde geçerli:

<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> 

Ve tüm (kod üzerinde bir hata varsa, onu aşağı kesim sadece var) şekilde çalıştığını zaman konumu güncellenir

tarayıcı boyutu değiştirir ve konum bazı JavaScript tarafından değiştirildiği zaman güncellemek için yeterince kolaydır, ancak sayfa aynı zamanda bazı değişiklikleri canlandırmak için CSS transition-duration'u kullanır. Bunu nasıl tespit edebilirim? En azından, nesneyi etkileyen bir geçişin ne zaman gerçekleşeceğini ve ne zaman duracağını bilmek istiyorum. İdeal olarak, herhangi bir hareketi nasıl yakalayacağımı bilmek isterim (örneğin, yazı tipi boyutu değişikliklerinden veya görüntü yüklemelerinden kaynaklanan).

Answer 1

Bu kulağı kontrol edebilir misiniz: http://jsfiddle.net/DpYNm/ Bir hareket başladığında ve bittiğinde kaydeder, sorununuza çözüm olup olmadığından emin değilim, ancak yalnızca doğru yönde size yardımcı olabilir!

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 her ms denilen ve ilk bir özelliğe karşılık div genişliğini kazandıracak diyoruz edilir. Her değiştiğinde (geçişin başlangıcı), geçiş varsayılan değere geri dönene kadar tekrar oturum açmayacağından emin olmak için bir yardımcı özelliği kaydedecek ve kaydedecektir. Eminim ki bu kısmı ihtiyaçlarınıza göre değiştirebilirsin! :)