检测由 CSS 过渡引起的 HTML 元素的移动

Question

我的页面上有一个 Flash 元素，由于 Flash 通常非常精细，因此需要将其定位在整数像素值处（如果需要详细信息，请参阅 Flash webcam access request prompt unresponsive）。

我通过将object 包装在div 中、在object 上设置position:absolute 并使用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 的宽度保存到一个属性中。每次它发生变化（转换开始）时，它都会记录并保存一个辅助属性，以确保在转换恢复到默认大小之前不会再次记录。我相信您可以更改该部分以适合您的需求！ :)