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

Question

遇到了一个令人烦恼的问题，Webkit浏览器中，如果你修改float属性，CSS过渡效果将不会触发。这里有一个演示链接: http://jsfiddle.net/patrickmarabeas/RxeWc/ 基本上，如果你想要在元素的宽度改变时进行过渡效果，但同时也修改了float属性从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;，我遇到了这个问题-但它与浮动元素不兼容。

- Patrick

---

有趣的——以前没有遇到过这个。出于好奇，你为什么想要添加和删除浮点数？在你的例子中似乎没有什么不同，尽管我明白那可能只是一个最小的测试案例。 - Rich Bradshaw

@RichBradshaw 这个没有演示，但是增加宽度的第一个元素会将其他两个元素向右推出父级div。由于需要使用 white-space: nowrap; 以保留这些元素在同一行上，因此需要删除浮动。我正在使用网格系统，并希望元素正常浮动和定位，仅在需要时进行修改。请参见推送示例以获取所需功能的类型：http://api.jquerymobile.com/panel/ - Patrick

Answer 1

典型的SO会话，花费一个小时找出根本问题，在SO上搜索解决方案，却发现没有，仔细构造带有示例Fiddle的问题，同时尝试每个可能的建议，最终解决自己的问题。虽然觉得这很奇怪，但还是决定发布。

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

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

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

---

编辑：Chrome似乎已经解决了这个问题。

- Patrick

---

哇，这就是我所说的一个奇怪的 bug。非常高兴能够分享它！ - A. Wolff

实际上，您必须在元素上调用任何有效的CSS属性，例如$(this).css('color'); http://jsfiddle.net/vrcaA/1/ - A. Wolff