CSS关键帧动画没有移除显示块
CSS Keyframe animation not removing display block
我有一个默认隐藏的搜索栏,当你点击按钮时,它会隐藏或删除它取决于状态。我认为它工作得很好,因为它完美地出现和消失,直到我意识到我不能点击一个特定的元素,因为搜索div是hidden
,但实际上显示是block
。我需要它去显示none
<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;
}
}
你不应该尝试在非数值之间进行动画。
相反,你可以使用opacity
和z-index
或left: -100%;
或类似的东西,因为你不能用关键帧将display
更改为none
。
你可以在这里阅读更多内容:CSS中的过渡和动画- book
相关文章:
- 关键帧之间的css3动画延迟
- 访问css3动画的关键帧
- 当用户滚动到页面的某个部分时,如何触发关键帧
- 动态关键帧插入在 IE 或 Firefox 上不起作用
- CSS3卡翻转带关键帧不工作
- 一种读取或更改CSS动画关键帧的方法
- Skrollr:当滚动位置在最后一个关键帧之后时传递函数
- 替换对象数组中的关键帧
- 如何在Javascript中更改关键帧状态
- CSS - 在关键帧中触发悬停
- 多次单击时运行关键帧动画
- CSS3 关键帧动画是否比属性过渡更平滑?
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- CSS关键帧过渡的最佳方法
- CSS 关键帧动画的随机“起点”
- 为什么单击时的关键帧动画只触发一次
- CSS3 关键帧不起作用
- CSS关键帧动画没有移除显示块
- 关键帧动画时,更改回显示无
- 更改或编辑对象中的关键帧,以便在视图中显示.使用Angular