位置更改时，CSS转换在Firefox中不起作用 [英] CSS transition doesn't work in Firefox when position is changed

问题描述

我发现烦人的错误。我尝试动画子元素的CSS属性，同时父的位置正在改变（在该示例中，它是从固定到绝对）。这在Webkit浏览器中没有问题，但在Firefox（v。17.0.1）中没有动画过渡。

I've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.

jsFiddle示例： http://jsfiddle.net/chodorowicz/bc2YC/5/

jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/

是否有任何解决方案，使其在FF中工作？

Is there any solution to make it work in 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。虽然这不是我最喜欢的修复，它做的工作。

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);
    }
});

对于firefox来说，toggleClass（）会立即触发这两个类， 。放置超时给jQuery足够的时间来处理它需要的，为了做类似于Chrome等的转换，我把超时50ms，这似乎给它足够的时间，jQuery处理什么它需要做。低于我有时看到的，它失败，并做你目前正在经历的。

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.

这篇关于位置更改时，CSS转换在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！