Webkit CSS 转换在浮动属性更改时失败答案

【问题标题】：Webkit CSS Transition fails on float property changeWebkit CSS 转换在浮动属性更改时失败
【发布时间】：2013-06-15 01:28:43
【问题描述】：

在 Webkit 浏览器中遇到了一个烦人的错误，如果您更改 float 属性，CSS 过渡不会触发。这是一个 Fiddle 来演示：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; - 这不适用于浮动元素。

【问题讨论】：

有趣——以前没有遇到过这个。出于兴趣，为什么要添加和删除浮动？在您的示例中，它似乎没有什么不同，尽管我很欣赏这可能是一个最小的测试用例。
@RichBradshaw 这没有演示，但是增加宽度的第一个元素将其他两个元素向右推，溢出到父 div 之外。由于您需要white-space: nowrap; 才能将这些元素保留在同一行上，因此需要删除浮动。我正在使用网格系统，并且希望元素正常浮动和定位，并且仅在需要时进行更改。请参阅推送示例以了解预期的功能类型：api.jquerymobile.com/panel

【解决方案1】：

典型的 SO 会话，花一个小时找出根本问题，搜索 SO 寻找解决方案，但没有找到，用 Fiddle 示例仔细构建问题，同时继续尝试某人可能提出的每一个可能的建议，从而解决您的问题自己的问题。无论如何，我认为这是一个足够奇怪的球。

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

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

编辑：Chrome 正在修复该问题

【讨论】：