Question

我有一个容器div，它可以容纳大约20个左边的div。当我使用Tween.js使用javascript动画调整父div的大小时，浮点数不会回流到新的大小，除非我鼠标悬停在其中一个div上。

似乎有些事情阻止了网页刷新。

我想也许有一种方法通过javascript强制显示更新？

更新：

我把它放在JS Fiddle上： http://jsfiddle.net/mattlundstrom/fNUhn/

单击任何缩略图以切换动画。此版本使用TweenLite为#project-container的“Left”CSS设置动画。注意在动画之后必须如何移动鼠标以使容器的内容重新流动。

我在Safari 5+ OSX和Chrome 20+ OSX中得到了这个结果。在Firefox 13.0 OSX中按预期工作。

更新2

我所看到的视频： http://f.cl.ly/items/1R1n2s0U3I3c1M3s2K0T/lundstrom_float_issue.mov

Answer 1

我能像你说的那样重新创建你的问题。似乎webkit在动画或过渡后重绘或测量元素是个问题。

这绝不是最好的解决方案，但目前至少它会起作用，希望我找到的东西能帮助其他人找到更多。

如果您将 onComplete 添加到动画中，并触发 .project mouseleave ，它看起来可以正常工作：

function completeAnimate(){
        $('.project').trigger('mouseleave');
    }

    function contract(){

        // PROJECTS CONTRACT RIGHT
        TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});
    }

<强> So here is my jsfiddle which has a few tests and other animation tests so that you can see some of what I tried

jQuery animate（）和css关键帧动画与您正在使用的Tween代码具有相同的结果，但是，直接样式更新工作正常。

$('#projects-container').css('left','300px');

根本没有问题，但当然也没有动画。

我注意到的其他一些事情是，如果您取出 .project 事件绑定，它仍然无法正确重绘，但是如果你移动鼠标它仍然没有。它只是保持这种状态。

我还尝试使用一些通常用来强制重绘的技巧来强制重绘元素。我在动画开始后不时地尝试了这个，但是没有任何运气。

您还可以将两个补间合并为一个，两个属性都只是一个FYI。

希望这有助于有人找到webkit过渡时发生的真正问题。

使用javascript调整包含浮点数的div的大小时，浮动不会重排

1 个答案: