Question

所以我有问题

我有一个header元素，几乎看不到它，直到用户将鼠标悬停在一个导致navbar标题打开的不可见元素上为止。

但是，当鼠标即使仍在标题上时稍微移动时，也会导致标题闪烁。

这是我的HTML：

<div class='hover_box'></div>
<header class='isHidden flex'>
  <div class='button home'></div>
  <div class='button gallery'></div>
</header>

以下是相关的CSS类：

.flex{
  display:flex;
}

.hover_box{
  display:block;
  position:absolute;

  top:0;

  height:2.5em;
  width:100%;
}
header{
  display:block;
  position:absolute;

  top:0;
  height:0.2em;
  width:100%;

  background-color:#FFBB00;
}

header.isShown{
  height:2em;
}

header .button{
 display:block;
 width:1em;
 height:auto;
 border: 2px solid rgb(0,0,0);
}
@keyframes show-header{
  from{
    height:0.2em;
  }
  to{
    height:3em;
  }
}

最后是用来触发动画的JS：

function showHeader(e){
    console.log("showing header")
    let elem = document.getElementsByTagName("header")[0];
    elem.classList.toggle("isShown");

}

document.getElementsByClassName("hover_box")[0].addEventListener("mouseenter", showHeader);

document.getElementsByClassName("hover_box")[0].addEventListener("mouseout", showHeader);

这与关键帧有关还是与我暗示动画的方式有关？我在devtools中看到的是isShown类正在快速添加和删除，为什么它发生得如此之快是我希望得到回答的真正问题。我也没有使用堆栈溢出太长时间了，所以为了获得一些反馈，我想知道：这是帖子的一种有效格式吗？

动画中闪烁的标题

0 个答案: