CSS關鍵幀動畫沒有刪除顯示塊

我有一個默認隱藏的搜索欄，當你點擊按鈕時它會根據狀態隱藏或刪除它。我認爲它很好，因爲它出現並完全消失，直到我意識到我無法點擊某個特定元素，因爲搜索div是hidden，但實際上顯示的是block。我需要它去顯示none。CSS關鍵幀動畫沒有刪除顯示塊

HTML：

<div id="searchsection" class="btnlist btnlist-top blank" style="display:none"> 
</div> 

<button id="pl-manage-search" style="background-color:#2f383f;font-size: 38px;" class="btn btn-default" type="button" title="Toggle Search" onclick="openSearch()"><i class="fa fa-search"></i></button>

的CSS：

@keyframes fadinsearch { 
    0% { 
     display: none; 
     opacity: 0; 
    } 
    1% { 
     display: block; 
    } 
    100% { 
     display: block; 
     opacity: 1; 
    } 
} 

.fadinsearch { 
    animation: fadinsearch 500ms linear; 
    animation-fill-mode: forwards; 
} 

@keyframes fadoutsearch { 
    0% { 
     display: block; 
     opacity: 1; 
    } 
    99% { 
     display: block; 
    } 
    100% { 
     display: none; 
     opacity: 0; 
    } 
} 

.fadoutsearch { 
    animation: fadoutsearch 500ms linear; 
    animation-fill-mode: forwards; 
}

JS：

var opens = false; 
function openSearch() 
{ 
    if (opens == false) 
    { 
     $("div[id='searchsection']").each(function() 
     { 
      //$(this).toggleClass('blank fadinsearch'); 
      $(this).removeClass("blank").addClass("fadinsearch"); 
      $(this).removeClass("fadoutsearch").addClass("fadinsearch"); 
     }); 
     document.getElementById("searchsection").style.display = "block"; 
     document.getElementById("playlist-entries").style.paddingTop = "79px"; 
     opens = true; 
    } 
    else 
    { 
     $("div[id='searchsection']").each(function() 
     { 
      $(this).removeClass("fadinsearch").addClass("fadoutsearch"); 
     }); 
     document.getElementById("playlist-entries").style.paddingTop = "1px"; 
     //document.getElementById("searchsection").style.display = "none"; 
     opens = false; 
    } 
}

來源

2016-10-17 irishwill200

創建代碼片斷 –

可能的複製（http://stackoverflow.com/questions/27904886/can [我可以申請一個CSS過渡到overflow屬性？] -i-apply-a-css-transition-to-the-overflow-property） – TylerH

答案在那裏解決你的問題^ – TylerH

你不應該試圖非數值之間的動畫。

相反，你可以使用opacity和z-index或left: -100%;或類似的東西，因爲你不能使用關鍵幀改變display到none。

你可以閱讀更多關於它在這裏：Transitions and Animations in CSS- book

來源

2016-10-20 13:47:22

CSS關鍵幀動畫沒有刪除顯示塊

回答

相關問題