jquery - 如何在动态更改父类时在子元素上使用 css transition？

Question

http://jsfiddle.net/833X6/

正如您在上面的 fiddle 中所看到的，我正在使用 Bootstrap ，并且我希望导航栏始终保持在 View 中，因此向下滚动一点时，我添加了 navbar-fixed-top类，一旦添加了这个类，我希望子文本使用 css transition 淡入淡出。为此，我尝试了:

.navbar .menuItem-cart{
    opacity:0;
    transition:all 5s ease-in;
}
.navbar.navbar-fixed-top .menuItem-cart{
    opacity:1;
}

但这似乎不起作用，但是如果我在 Firebug 中手动更改 .menuItem-cart 的不透明度值，转换就会开始。我做错了什么？

PS:我没有包括所有浏览器特定的转换，因为我仍在最新的 firefox 中测试它。

Answer 1

CSS transition 属性不继承:https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

因此您需要单独将过渡属性应用于您的子元素。

更新:

抱歉，我误读了您最初的 CSS。是的，应该有效!

唉，我不明白为什么它不能在 Firefox 中运行。我已经尝试了多种类分配的变体，改变了特异性，甚至改变了我们正在过渡的内容，但你的 JSfiddle 在 Firefox 中从未真正为过渡设置动画。它只是“捕捉”到最终状态。

所以我很难过。我真的希望有人能回答这个问题。

顺便说一句，如果您用谷歌搜索“Firefox 中的 CSS 转换问题”，您会注意到 StackExchange 上发布的很多问题。 las，每个问题似乎都有不同的答案。

在这一点上，我建议尝试构建一个没有 Bootstrap CSS 的示例 JSFiddle。可能是那里有一些 CSS 在特异性等方面与我们自己的 CSS 混淆。这至少会缩小问题的范围。

至于IE……至少我可以回答。如果我们谈论的是 IE8 及更早版本，问题是它不支持 CSS opacity。您必须为此使用 IE 过滤器:filter: alpha(opacity=70); 我不知道您是否可以通过 CSS 转换 IE8 的过滤器。