檢測由CSS轉換引起的HTML元素的移動

我的頁面上有一個Flash元素，並且由於Flash通常非常微妙，因此需要將其置於整數像素值（如果需要詳細信息，請參見Flash webcam access request prompt unresponsive）。檢測由CSS轉換引起的HTML元素的移動

我通過在div包裹object，在object設置position:absolute，並使用jQuery設置left和top到含有div的圓潤offset實現這一目標。這是一個拗口，這裏是代碼的形式：

<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來動畫一些改變。我如何檢測這個？至少，我想檢測何時會發生影響對象的轉換，並知道何時會停止。理想情況下，我想知道如何捕捉任何動作（例如由字體大小更改或圖像加載引起的動作）。

來源

2013-04-13 Dave

有一些關於轉換的事件，但我不知道它們是多麼有用 –

您可以檢測轉換何時結束，但轉換何時開始，但至少不是我意識到的。搜索跳轉事件 –

@烘烤謝謝，這是一個開始。它現在至少正確定位。如果可能，我仍然希望在動畫期間定位它。給未來的讀者：'.on（'transitionend webkitTransitionEnd oTransitionEnd otransitionend'，update）;' – Dave

你可以檢查這個小提琴：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寬度保存到一個屬性。每當它發生變化（轉換開始）時，它都會記錄並保存一個助手屬性，以確保它不會再次登錄，直到轉換返回到默認大小。我相信你可以改變這一部分，以適應你的需求！ :)

來源

2013-04-29 06:26:06 Toverbal

Every毫秒？！ Crikey！無論如何，我知道我可以使用間隔（你應該使用'setInterval'而不是'setTimeout'這樣的事情;超時是浪費的），但我正在尋找一個事件驅動的解決方案。 – Dave

我不認爲有事件驅動的解決方案。但是，你可以增加超時時間，儘管1ms對於CPU來說是很多時間，即使在JavaScript中也是如此。關於setTimeout和setInterval之間的區別：它們本質上是相同的，但setInterval將每x毫秒執行一次，我使用setTimeout的方式意味着只有在超時完成後，計時器纔會重新開始。 Afaik他們在內部使用相同的機制。 – Toverbal

檢測由CSS轉換引起的HTML元素的移動

回答

相關問題