Wykryj ruch elementu HTML spowodowany przejściami CSS

Question

Mam element Flash na mojej stronie, a ponieważ Flash jest zwykle dość delikatny, musi być umieszczony na wartościach całkowitoliczbowych (patrz Flash webcam access request prompt unresponsive, jeśli chcesz uzyskać szczegóły).

ja to osiągnąć przez owijanie object w div ustawienie position:absolute na object i jQuery ustawić left i top zaokrąglonym offset z zawierającego div. To był łyk, tutaj jest w formie kodu:

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

I to wszystko działa świetnie (jeśli powyższy kod ma błąd, to tylko od je ścinać)

że zaktualizuje pozycji, gdy przeglądarka zmienia rozmiar i można ją łatwo zaktualizować, gdy pozycja zostanie zmieniona przez niektóre skrypty JavaScript, ale strona używa również CSS transition-duration do animowania niektórych zmian. Jak mogę to wykryć? Jako minimum chciałbym wykryć, kiedy następuje przejście, które wpływa na obiekt, i wiedzieć, kiedy to się skończy. Idealnie chciałbym wiedzieć, jak złapać dowolny ruch (na przykład spowodowany zmianami rozmiaru czcionki lub ładowaniem obrazów).

Answer 1

Możesz sprawdzić to skrzypce: http://jsfiddle.net/DpYNm/ Loguje się, gdy ruch zaczyna się i kończy, nie jestem pewien, czy to rozwiązanie twojego problemu, ale może ci to pomóc we właściwym kierunku!

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 nazywa co ms aw pierwszym nazywają go uratuje szerokość div do nieruchomości. Za każdym razem, gdy się zmienia (początek przejścia), loguje się i zapisuje właściwość pomocnika, aby upewnić się, że nie zaloguje się ponownie, dopóki przejście nie powróci do domyślnego rozmiaru. Jestem pewien, że możesz zmienić tę część, aby dopasować ją do swoich potrzeb! :)