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

Question

我的页面上有一个Flash元素，由于Flash通常是相当微妙的，它需要定位为整数像素值(参见Flash网络摄像头访问请求提示无响应，如果你想要详细信息)

我通过在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来动画一些更改。我该如何检测呢?至少，我希望检测到影响对象的过渡何时发生，并知道它何时停止。理想情况下，我想知道如何捕捉任何运动(例如由字体大小变化或图像加载引起的)。

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属性，以确保它不会再次记录，直到转换恢复到默认大小。我相信你可以改变那部分以适应你的需要!:)