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

2023年4月3日 322次阅读

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

基本上,如果你想要在元素宽度改变时进行转换,还要改变float：left;浮动：无;转换根本不会触发.当您打算在转换结束时调用某些JS时,这会导致进一步的问题：

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

我正在应用一个类更改宽度更改之前的元素float属性,并尝试了两个：

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

//and

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

由于需要使用白色空间,我遇到了这个问题：nowrap;在一个特定的布局实例中 – 它不适用于浮动元素.

最佳答案 典型的SO会话,花费一个小时搞清楚根本问题,搜索SO寻找解决方案,找不到,用示例Fiddle仔细构建问题,同时继续尝试某人可能提出的每个可能的建议,并因此解决您自己的问题.不管怎么说,以为它很奇怪.

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

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

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

编辑：Chrome会解决此问题

点赞