如何在动态更改父类的同时对子元素使用css转换？

Question

http://jsfiddle.net/833X6/

正如你在上面提到的那样，我正在使用bootstrap，我希望导航栏始终保持在视图中，所以在向下滚动一点时，我将navbar-fixed-top类添加到它，并尽快在添加此类时，我希望使用css过渡淡出子文本。为此，我尝试了：

.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中从未真正动画过渡。它只是“陷入”最终状态。

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

顺便说一句，如果你在谷歌'谷歌'过渡问题'你会注意到StackExchange上发布了很多问题。唉，每个问题似乎都有不同的答案。

此时，我建议尝试构建一个示例JSFiddle，而不是bootstrap CSS。可能是那里有一些CSS在特殊性等方面搞乱了我们自己的CSS。这至少会使问题缩小。

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