当位置发生变化时，CSS转换在Firefox中不起作用

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

---

看来你已经找到了一个很好的bug。 虽然这不是我最喜欢的解决方法，但它完成了这项工作。 改变你的button2做点击。

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

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

对于firefox来说，toggleClass（）对于两个类都会立即触发，导致转换效果出现一些问题。 把超时设置给jQuery足够的时间来处理它所需要的时间，以便做类似于Chrome中的转换等。我把超时设置为50ms，这似乎给了它足够的时间让jQuery处理它需要做的。 比我有时看到的要低，它会失败并做你目前正在经历的事情。

链接地址: http://www.djcxy.com/p/39559.html

上一篇: CSS transition doesn't work in Firefox when position is changed

下一篇: How do I make a div fill an entire table cell?