下拉菜单淡出

Question

所以我创建了一个下拉菜单。当用户将鼠标悬停在导航键，使用CSS3 Transitations类“下拉菜单内容”淡入如下图所示的演示：

https://jsfiddle.net/4xk78qse/

我想不通的是如何淡出'dropdown-content'，当用户没有悬停在任何按钮上时。

我曾尝试在的jsfiddle例如添加

animation fadeout 2s; 

@keyframes fadeout { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

基本上淡出相反在动画但这并没有工作。

如果任何人都可以帮助我淡出，当用户没有悬停在任何将是真棒的按钮！谢谢。

Answer 1

您更好地使用过渡要做到这一点，而不是关键帧动画是这样的：

.dropdown-content { 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    opacity: 0; 
    transition: all 1s; 
} 

Fiddle

Answer 2

你需要这个CSS，因为当悬停结束您的悬停类变换” .dropdown .dropdown内容”。然后，您只能为下拉内容调用淡出。

.dropdown .dropdown-content{ 
    display: block; 
    opacity: 1; 
    -webkit-animation: fadeout 2s; 
    -moz-animation: fadeout 2s; 
    -ms-animation: fadeout 2s; 
    -o-animation: fadeout 2s; 
    animation: fadeout 2s; 
    opacity: 0; 
} 
@keyframes fadeout { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

Answer 3

这里的技巧是使用CSS Transitions，而不是CSS动画。您将设置visibility和opacity而不是显示。

.dropdown-content { 
    visibility: hidden; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    -webkit-transition: opacity 2s, visibility 2s; 
    -moz-transition: opacity 2s, visibility 2s; 
    -ms-transition: opacity 2s, visibility 2s; 
    -o-transition: opacity 2s, visibility 2s; 
    transition: opacity 2s, visibility 2s; 
    opacity: 0; 
} 
.dropdown:hover .dropdown-content { 
    visibility: visible; 
    opacity: 1; 
} 

这里是你正在试图完成什么工作演示： https://jsfiddle.net/4xk78qse/9/