Question

我默认隐藏了一个搜索栏，当你点击按钮时，它会根据状态隐藏或删除它。我觉得它很有效，因为它出现并完全消失，直到我意识到我无法点击特定元素，因为搜索div是String[] parts = line.split("$"); String name = parts[0]; String alcohol = parts[1]; String price = parts[2];但实际上显示为hidden。我需要它来显示block。

HTML：

none

的CSS：

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

JS：

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

Answer 1

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

相反，您可以使用opacity和z-index或left: -100%;或类似的内容，因为您无法使用关键帧将display更改为none。

您可以在此处详细了解：Transitions and Animations in CSS- book

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

1 个答案: