Webkit CSS Transition在浮动属性更改时失败

Question

在Webkit浏览器中遇到一个恼人的错误，如果改变float属性，不会触发CSS转换。这是一个小提琴演示：http://jsfiddle.net/patrickmarabeas/RxeWc/

基本上，如果您希望在元素宽度发生变化时进行转换，但也将float: left;更改为float: none;，则转换根本不会触发。当您打算在转换结束时调用某些JS时，这会导致更多问题：

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

我在宽度改变之前应用了一个更改元素float属性的类，并尝试了两种方法：

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

//and

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

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

Answer 1

典型的SO会话，花一个小时搞清楚根本问题，搜索SO寻找解决方案，找不到，用示例Fiddle仔细构建问题，同时继续尝试有人可能提出的每个可能的建议，并因此解决你的问题自己的问题。不管怎么说，我觉得它很奇怪。但是

只需在设置后检查元素CSS，然后再调整其宽度：

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

查看此更新的小提琴：http://jsfiddle.net/patrickmarabeas/vrcaA/

---

修改：Chrome希望解决问题