javascript - 检测由 CSS 转换引起的 HTML 元素的移动

Question

我的页面上有一个 Flash 元素，因为 Flash 通常非常脆弱，所以需要将其定位在整数像素值处(如果需要详细信息，请参见 Flash webcam access request prompt unresponsive)。

我通过将 object 包装在 div 中，在 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 来动画一些变化。我怎样才能检测到这个？至少，我想检测影响对象的转换何时发生，并知道它何时停止。理想情况下，我想知道如何捕捉任何移动(例如由字体大小变化或图像加载引起的移动)。

Answer 1

你能检查这个 fiddle 吗: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 的宽度保存到一个属性中。每次它更改(转换开始)时，它都会记录并保存一个辅助属性，以确保它不会再次记录，直到转换回到默认大小。我相信您可以更改该部分以满足您的需求! :)