CSS关键帧动画不删除显示块

Question

我有一个默认隐藏的搜索栏，当您单击按钮时，它将根据状态隐藏或删除它。我认为它工作得很好，因为它出现并完美消失，直到我意识到我无法单击特定元素，因为搜索 div 是hidden，但实际上显示的是block。我需要它去显示none。

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;
    }
}

Answer 1

您不应该尝试在非数值之间设置动画。

相反，您可以使用 opacity 和 z-index 或 left: -100%; 或类似的东西，因为您不能将 display 更改为 none 与关键帧。

您可以在此处阅读更多信息：Transitions and Animations in CSS- book