jquery - Webkit CSS 转换在浮动属性更改时失败

Question

在 Webkit 浏览器中遇到一个烦人的错误，如果您更改 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;——它不适用于浮动元素。

score 2 · Accepted Answer

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

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

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

看到这个更新的小提琴：http: //jsfiddle.net/patrickmarabeas/vrcaA/

编辑： Chrome 看起来解决了这个问题

1 回答 1