當位置改變時，CSS轉換在Firefox中不起作用

我發現了惱人的錯誤。我嘗試在父級的位置同時改變時（在示例中它從固定位置改變爲絕對位置），嘗試對子元素的CSS屬性進行動畫處理。這在Webkit瀏覽器中沒有問題，但在Firefox（17.0.1）中沒有動畫過渡。當位置改變時，CSS轉換在Firefox中不起作用

的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%; 
}

來源

2012-12-14 chodorowicz

提交錯誤報告：https://bugzilla.mozilla.org/show_bug.cgi?id=821976 – chodorowicz

在Firefox 34中，此錯誤似乎已解決。 – mems

看來你找到了一個好的bug。雖然這不是我最喜歡的解決方法，但它完成了這項工作。改變你的button2做點擊。

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

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

這似乎對Firefox的toggleClass（）將立即觸發這兩個類，導致與過渡效果的一些問題。把超時設置給jQuery足夠的時間來處理它所需要的時間，以便做類似於Chrome中的轉換等。我把超時設置爲50ms，這似乎給了它足夠的時間讓jQuery處理它需要做的。比我有時看到的要低，它會失敗並做你目前正在經歷的事情。

來源

2012-12-14 18:29:05

嘿，是的，一個討厭的，好bug。感謝您發現黑客修復它。我不知道我是否會使用它，因爲它需要額外的CSS和JS代碼，這些動畫只是眼睛糖果，但它肯定有效！我向Mozilla提交了一個錯誤報告：https：//bugzilla.mozilla.org/show_bug.cgi？id = 821976 – chodorowicz

仍然是超過一年後的最佳解決方案。謝了哥們！ – Stefanie

很好的解決方法。而這個錯誤似乎仍然存在︰https://bugzilla.mozilla.org/show_bug.cgi?id=625289 – BronzeGate

當位置改變時，CSS轉換在Firefox中不起作用

回答

相關問題