css - 更改位置时，CSS 过渡在 Firefox 中不起作用

Question

我发现了烦人的错误。当父元素的位置发生变化时（在示例中它从固定到绝对），我尝试为子元素的 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%;
}

Answer 1

It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.

$("#button2").on({
    click: function() {
        $("#container").toggleClass("some_state");

        setTimeout(function() {
            $("#container").toggleClass("some_state_position");
        }, 50);
    }
});

It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.