更改位置时，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

看来你发现了一个很好的错误。虽然这不是我最喜欢的解决方法，但它确实有效。更改您的 button2 以在点击时执行此操作。

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

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

对于 Firefox，toggleClass() 会立即为两个类触发，导致过渡效果出现一些问题。设置超时给 jQuery 足够的时间来处理它需要的内容，以便进行类似于 Chrome 中的转换等。我将超时设置为 50 毫秒，这似乎给了 jQuery 足够的时间来处理什么它需要做。有时比我看到的要低，它会失败并做你目前正在经历的事情。