3

我有一个容器 div，其中包含大约 20 个向左浮动的 div。当我使用 Tween.js 使用 javascript 动画调整父 div 的大小时，除非我将鼠标悬停在其中一个 div 上，否则浮动不会重排到新大小。

似乎有什么东西阻止了页面刷新。

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

更新：

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

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

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

更新 2

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

4

1 回答 1

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});
    }

所以这是我的 jsfiddle，它有一些测试和其他动画测试，以便您可以看到我尝试过的一些内容。

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

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

完全没有问题，但当然也没有动画。

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

我还尝试使用一些通常可以用来强制重绘的技巧来强制重绘元素。我在动画开始后每隔一段时间就尝试过这个，但没有任何运气。

您也可以将这两个补间与两者的属性合并为一个，仅供参考。

希望这将帮助某人找到 webkit 转换的真正问题。

于 2012-07-27T03:47:23.413 回答