html - 如何避免溢出使菜单在 css 动画期间闪烁

Question

我制作了一个垂直菜单，在菜单项悬停时带有下划线效果。

它在代码片段中不起作用，但效果(taken from here)如下:

/* LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}

仅在 Chrome 中，我在浏览器高度中有一个 4 像素的范围，当您将鼠标悬停在一个元素上时，在动画期间，菜单的高度会快速变化。它会导致闪烁的滚动条(出现和消失得非常快)。

高度并没有真正改变，我不知道如何避免这种情况。当然， overflow hidden 不是一个好的答案，除非它只在动画期间被禁用。

这是代码片段(仍在处理它> 除了插入符伪元素放置，这与我的真实情况完全相同，除了这里，问题不会发生。)

#why,
#about,
#how,
#when,
#where,
#what {
  opacity: 0;
  display: none;
}
#why:target,
#about:target,
#why2:target,
#about2:target {
  display: block;
  opacity: 1;
}
.tab input:checked ~ .tab-content {
  max-height: 25em;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab input,
#menu-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.menu {
  position: absolute;
  width: 30%;
  background-color: grey;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}
.content {
  position: absolute;
  left: 30%;
  background-color: cyan;
  top: 0;
  right: 0;
  bottom: 0;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tab input:checked ~ .tab-content,
#about:target *#about-menu {
    max-height: 25em;
}
/* Icon */

.tab label::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: width .35s ease, background-color .35s ease;
    -o-transition:  width .35s ease, background-color .35s ease;
    transition:  width .35s ease, background-color .35s ease;
}
.tab.expandable input[type=checkbox] + label::after {
    content: "\25BC";
    cursor: pointer;
}
.tab.expandable input[type=checkbox]:hover + label::after {
    color: #1EAEDB;
}
.tab.expandable input[type=checkbox]:checked:hover + label::after {
    color: #555;
}
.tab.expandable input[type=checkbox]:checked + label h5,
.tab.expandable input[type=checkbox]:checked + h5 {
    margin-bottom: 0px;
}
input[type=checkbox]:checked + label h5,
input[type=checkbox]:checked + h5 {
    color: inherit;
    text-decoration: none;
}
.tab.expandable input[type=checkbox]:checked + label::after {
    transform: rotateX(180deg);
}
input[type=checkbox]:checked + label h5:after,
input[type=checkbox]:checked + h5 a:after {
    width: 100%;
    background: #222;
}
.nav-item a,
.nav-sub-item a,
.tab a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    width: 100%;
}
.nav-item a:after,
.nav-sub-item a:after,
label h5:after {
    content: '';
    display: block;
    height: 1px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
    position: absolute;
    bottom: 0;
}
.nav-item a:hover,
.nav-sub-item a:hover,
label h5:hover,
input[type=checkbox]:hover + label h5 {
    color: #1EAEDB;
    text-decoration: none;
}
.nav-item a.selected,
.nav-sub-item a.selected,
label h5.selected {} .nav-item a:hover:after,
.nav-sub-item a:hover:after,
label h5:hover:after,
input[type=checkbox]:hover + label h5:after {
    width: 100%;
    background: #1EAEDB;
}
.nav-item a.selected:after,
.nav-sub-item a.selected:after,
label h5.selected:after {
    width: 100%;
    background: #555;
}
.tab label .nav-item {
    /*/  margin-bottom: 0px;*/
}
/* Acordeon styles */

.tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
}
.tab input,
#menu-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tab label,
#menu-label {
    position: relative;
    display: block;
}
.tab-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .35s;
    -o-transition: max-height .35s;
    transition: max-height .35s;
}
.tab-content h6 {
    margin: 1em;
}
/* :checked */

.tab input:checked ~ .tab-content,
#about:target *#about-menu {
    max-height: 25em;
}
/* Icon */

.tab label::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
.tab.expandable input[type=checkbox] + label::after {
    content: "\25BC";
    cursor: pointer;
}
.tab.expandable input[type=checkbox]:hover + label::after {
    color: #1EAEDB;
}
.tab.expandable input[type=checkbox]:checked:hover + label::after {
    color: #555;
}
.tab.expandable input[type=checkbox]:checked + label h5,
.tab.expandable input[type=checkbox]:checked + h5 {
    margin-bottom: 0px;
}
input[type=checkbox]:checked + label h5,
input[type=checkbox]:checked + h5 {
    color: inherit;
    text-decoration: none;
}
.tab.expandable input[type=checkbox]:checked + label::after {
    transform: rotateX(180deg);
}
input[type=checkbox]:checked + label h5:after,
input[type=checkbox]:checked + h5 a:after {
    width: 100%;
    background: #222;
}

<html>

<body>
  <div class="menu">
    <div class="tab  expandable">
      <input id="about-input" type="checkbox">
      <label id="about-label" for="about-input">
        <h5 class="nav-item">ABOUT</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="about/purpose">Purpose2</a></h6>
        <h6 class="nav-sub-item"><a href="about/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="about/2">2</a></h6>
        <h6 class="nav-sub-item"><a href="about/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="why-input" type="checkbox">
      <label id="why-label" for="why-input">
        <h5 class="nav-item">WHY</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="why/purpose">why2 is that?</a></h6>
        <h6 class="nav-sub-item"><a href="why/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="why/2">2)</a></h6>
        <h6 class="nav-sub-item"><a href="why/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="why/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="how-input" type="checkbox">
      <label id="how-label" for="how-input">
        <h5 class="nav-item">how</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="how/purpose">Purpose2</a></h6>
        <h6 class="nav-sub-item"><a href="how/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="how/2">2</a></h6>
        <h6 class="nav-sub-item"><a href="how/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="how/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="when-input" type="checkbox">
      <label id="when-label" for="when-input">
        <h5 class="nav-item">when</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="when/purpose">why2 is that?</a></h6>
        <h6 class="nav-sub-item"><a href="when/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="when/2">2)</a></h6>
        <h6 class="nav-sub-item"><a href="when/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="when/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="where-input" type="checkbox">
      <label id="where-label" for="where-input">
        <h5 class="nav-item">where</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="where/purpose">Purpose2</a></h6>
        <h6 class="nav-sub-item"><a href="where/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="where/2">2</a></h6>
        <h6 class="nav-sub-item"><a href="where/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="where/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="what-input" type="checkbox">
      <label id="what-label" for="what-input">
        <h5 class="nav-item">what</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="what/purpose">why2 is that?</a></h6>
        <h6 class="nav-sub-item"><a href="what/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="what/2">2)</a></h6>
        <h6 class="nav-sub-item"><a href="what/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="what/4">4</a></h6>
      </div>
    </div>
  </div>
  <div class="content">
    <section id="about">
      Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
      et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra

    </section>
    <section id="why">

      modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini:
      huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
      miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    </section>
    <section id="about2">
      Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
      et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra

    </section>
    <section id="why2">

      modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini:
      huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
      miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    </section>
  </div>
</body>

Answer 1

在伪上使用position: absolute

/* LEFT TO RIGHT */

.sliding-u-l-r {
  position: relative;
  display: inline-block;
}
.sliding-u-l-r:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
  width: 100%;
  background: blue;
}

<div class="sliding-u-l-r">
  Some text
</div>

或者transform: scale

/* LEFT TO RIGHT */

.sliding-u-l-r {
  display: inline-block;
  overflow: hidden;
}
.sliding-u-l-r:after {
  content: '';
  display: block;
  height: 3px;
  margin-left: -100%;
  width: 200%;
  transform: scale(0,1);
  background: transparent;
  transition: transform .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
  transform: scale(1,1);
  background: blue;
}

<div class="sliding-u-l-r">
  Some text
</div>