子 CSS3 过渡在 FireFox 中不起作用答案

【问题标题】：Child CSS3 transitions not working in FireFox子 CSS3 过渡在 FireFox 中不起作用
【发布时间】：2014-05-13 00:50:51
【问题描述】：

我有一个 h1 元素及其子元素使用 CSS3 过渡动画。在 Chrome 甚至 IE 10+ 中一切正常，但在 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 渲染引擎中的错误或警告，还是我缺少某些关键，导致我犯了一个愚蠢的错误？

【问题讨论】：

我刚刚下载了 FF 29 Beta，但我仍然看到不正确的行为。字母不是平滑地淡出，而是在 H1 元素是唯一平滑过渡的地方立即消失。
你能提供一个 JSFiddle 吗？
CSS3 听起来不错，但事实是它还没有准备好……而且性能也不是很好。我建议查看 GSAP 动画工具并查看 CSS 与 JS 动画性能。 greensock.com/js/speed.html
您是否有理由为所有转换指定all，然后选择性地仅在几个前缀上覆盖transition-property？此外，-ms-transition 已不再使用，因此可以将其删除而不会产生任何实际后果。

标签： css firefox css-transitions css-animations

【解决方案1】：

这在我看来就像https://bugzilla.mozilla.org/show_bug.cgi?id=625289：父强制框重建上position 值（到/从fixed）的变化，它丢失了孩子的旧样式信息，因此不会转换.

【讨论】：

非常感谢！你成功了！我对 FireFox 使用了一个凌乱的 hack。在这个问题的背景下，从位置固定开始与绝对位置是一个微小的区别，但我认为如果我仍然可以在其他浏览器中完全按照我的方式使用它，我会这样做。 @-moz-document url-prefix() { h1{ position:fixed; } }