当位置改变CSS转换不工作在Firefox(CSS transition doesn't w

我发现恼人的错误。 我尝试当父母的同时，位置改变（在从固定到绝对的例子）动画子元素的CSS属性。 这个工作没有在WebKit浏览器的问题，但在Firefox（第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:

看来你找到了一个好的bug。 虽然这不是我最喜欢的修复，它的工作。 更改BUTTON2做到这一点的点击。

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

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

这似乎对Firefox的toggleClass（）将立即触发这两个类，导致与过渡效果的一些问题。 把超时给jQuery的足够时间，使其能够处理什么需要，为了做类似的Chrome浏览器，等我把超时50ms的转变，这似乎给它足够的时间让jQuery来处理什么它需要做的。 去比，我有时会看到更低，它会失败，但目前你正在经历。

文章来源: CSS transition doesn't work in Firefox when position is changed