下拉菜單淡出

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/