Webkit CSS Transition在float属性更改时失败

Question

在Webkit浏览器中遇到一个恼人的bug，如果你改变float属性，CSS转场不会被触发。这里有一个小提琴来演示:http://jsfiddle.net/patrickmarabeas/RxeWc/

本质上，如果你想在元素的宽度改变时有一个过渡，但也把float: left;改为float: none;，过渡根本不会触发。当你打算在过渡端调用一些JS时，这会导致进一步的问题:

$('#element').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function(){
    ...
}

我正在应用一个类改变元素的浮动属性之前的宽度改变，并尝试两者:

$(this).toggleClass('removeFloat widthChange');
//and
$(this).toggleClass('removeFloat');
$(this).toggleClass('widthChange');

我遇到了这个问题，由于需要在布局的一个特定实例中使用white-space: nowrap; -它不与浮动元素一起工作。

Answer 1

典型的SO会话，花一个小时找出问题的根源，在SO中搜索解决方案，但没有找到，仔细地用示例构建问题，同时继续尝试别人可能提出的每一个可能的建议，最后解决你自己的问题。我觉得这是一个很奇怪的球，无论如何张贴。

只需要检查元素的CSS设置后，在调整其宽度之前:

$(this).toggleClass('removeFloat');
$(this).css('float'); //or any other valid property
$(this).toggleClass('widthChange');

查看更新后的Fiddle: http://jsfiddle.net/patrickmarabeas/vrcaA/

---

编辑: Chrome看起来修复问题