CSS 下拉菜单淡入淡出过渡和显示

Question

我一直在做我的功课，看来你不能在使用 display:none; 和 display:inline; 等的地方使用 CSS 过渡效果。

我想在我的 CSS 下拉菜单中添加悬停时的淡入和淡出，使其看起来更干净。使用我发现的显示元素时这是不可能的。

我尝试从我的 CSS 中删除 display，但是当我这样做时，元素就在那里（尽管不可见）并且当你将鼠标悬停在它上面时会淡入。我阅读了添加“指针事件：无”的建议；对此，这不是跨浏览器兼容的。如果您再次将鼠标移到它上面，它还会导致淡入淡出元素闪烁。

我还在使用显示元素时使用了 CSS 关键帧动画建议来淡入，但是当鼠标离开时无法让它淡出。 :(

我知道这是可能的，因为我在很多网站上都看到过它，但我无法让它适合我的工作。

这是我的代码：

http://pastebin.com/zVQapUNz

Answer 1

我已经在 jsfiddle.net 中编写了你的​​代码

http://jsfiddle.net/3PD7D/1/

当鼠标移到它上面时这确实有效，你可以使用相同的概念来改变不透明度

from {opacity:1;}
to {opacity:0;}

隐藏菜单。但是，这将使其透明，后面的任何东西都是可见的，但不可点击。如果将 display:none 添加到结束动画帧，我还没有尝试过会发生什么。