Question

我发现了烦人的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%;
}

Answer 1

好像你发现了一个很好的错误。虽然这不是我最喜欢的解决方案，但它可以胜任。更改按钮2以执行此操作。

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

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

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

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

1 个答案: