Обнаружение движения элемента HTML, вызванного переходами CSS

Question

У меня есть элемент Flash на моей странице, и поскольку Flash, как правило, довольно деликатный, он должен быть помещен в значения целочисленного пикселя (см. Flash webcam access request prompt unresponsive, если вам нужны детали).

Я достижения этой цели, обертывая object в div, установив position:absolute на object, и с помощью JQuery для установки left и top к закругленным offset вмещающего div. Это был полный рот, здесь в виде кода:

<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 вызываются каждый мс и в первом называют это сохранит ширину DIV в собственность. Каждый раз, когда он изменяется (начало перехода), он регистрирует и сохраняет свойство helper, чтобы гарантировать, что он не будет регистрироваться снова, пока переход не вернется к размеру по умолчанию. Я уверен, что вы можете изменить эту часть, чтобы она соответствовала вашим потребностям! :)