兒童CSS3過渡不工作在FireFox

我有一個h1元素和它的子元素使用CSS3過渡動畫。在Chrome甚至IE 10+中一切正常，但在Firefox中，過渡效果只能在父元素中看到，而不能在子元素中看到。兒童CSS3過渡不工作在FireFox

的代碼是這樣

<h1>G<span>eneric</span> D<span>ata</span> B<span>inder</span></h1>

凡h1元素和span元素都有自己轉變爲這樣：

h1{ 
    transition: all 800ms; 
    -moz-transition: all 800ms; 
    -webkit-transition: all 800ms; 
    -ms-transition: all 800ms; 
    -o-transition: all 800ms; 
    transition-property: line-height,width,font-size; 
    -moz-transition-property: line-height,width,font-size; 
    -ms-transition-property: line-height,width,font-size; 
    white-space: nowrap; 
} 

h1 span{ 
    display:inline-block; 
    max-width:500px; 
    transition: all 800ms; 
    -moz-transition: all 800ms; 
    -webkit-transition: all 800ms; 
    -ms-transition: all 800ms; 
    -o-transition: all 800ms; 
    transition-property: opacity,max-width; 
    -moz-transition-property: opacity,max-width; 
    -ms-transition-property: opacity,max-width; 
}

的影響可以在這裏看到：Generic Data Binder Site

這裏的問題是FireFox渲染引擎中的一個錯誤或警告，或者我在那裏丟失了一些重要信息，以至於我犯了一個愚蠢的錯誤？

來源

2014-04-02 John Louderback

我剛剛下載了FF 29 Beta，但是我仍然看到不正確的行爲。而不是平穩淡出的字母，他們立即消失在H1元素是唯一平滑過渡的地方。 –

你能提供一個JSFiddle嗎？ – aloisdg

CSS3的聲音和所有，但事實的真相是，它還沒有準備好......性能也不是很好。我建議查看GSAP動畫工具並查看CSS vs JS動畫的性能。 http://www.greensock.com/js/speed.html – Oneezy

這對我來說很像https://bugzilla.mozilla.org/show_bug.cgi?id=625289：父力量箱重建中的position值（來自/從fixed）的變化，這會丟失孩子們的舊式信息，因此它們不會轉換。

來源

2014-04-02 02:23:59

非常感謝！你釘了它！我爲FireFox使用了一個混亂的黑客攻擊。在這個問題的背景下，從固定位置到絕對位置是一個很小的區別，但是我認爲如果我仍然可以在其他瀏覽器中使用它，我會這樣做。 '@ -moz-document url-prefix（）{h1 {position：fixed; }} –

兒童CSS3過渡不工作在FireFox

回答

相關問題