我发现烦人的bug在同一时刻,父项的位置正在改变(在例子中是从固定的到绝对的),我尝试为子元素的CSS属性设置动画.这在Webkit浏览器中没有问题,但在Firefox(v.17.0.1)中没有动画转换.
jsFiddle示例：http://jsfiddle.net/chodorowicz/bc2YC/5/
有没有解决方案使其在FF中工作？
编辑
它在Firefox 34中修复
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
CSS
#container {
position:fixed; left:100px; top:100px;
}
#container.some_state_position {
position:absolute;
}
.Box {
width:100px; height:100px;
background:blue;
}
.some_state .Box {
background:red; width:50px; height:50px;
}
img,.Box {
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-ms-transition:all 1.5s ease;
transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
width:50%;
}
解决方法
看来你发现了一个很好的bug.虽然这不是我最喜欢的解决方案,但是它的工作.点击按钮更改你的button2.
$("#button2").on({
click: function() {
$("#container").toggleClass("some_state");
setTimeout(function() {
$("#container").toggleClass("some_state_position");
},50);
}
});
对于firefox来说,toggleClass()会立即触发两个类,从而导致转换效果的一些问题.放置超时给jQuery足够的时间来处理它需要什么,以便进行类似于Chrome中的转换等等.我将超时设置为50ms,这似乎给了足够的时间让jQuery处理它需要做.低于我看到的有时,它失败,做你正在经历的事情.
