淡入淡出同步的CSS动画问题

Question

我无法让导航正常淡出。在下面的代码片段中，如果您将鼠标悬停在商店上，将出现一个子导航。离开它，它会再次消失。

我的问题是褪色 - 背景似乎比文本褪色更快。我需要做什么才能使文本在背景消失的同时(或之前)消失？

ul, li {margin:0; padding:0;}
body {
  background: green;
}

#site-header {
  position: relative;
  z-index: 2;
}

#header-nav {
  display: flex;
  flex-grow: 1;
  transition: width 1s ease-in-out;
  overflow: hidden;
  width: 100%;
  background: #cccccc;
}

#header-nav.closed {
  width: 0;
  flex-grow: 0;
}

#header-nav #logo-ammonite {
  display: block;
  margin-left: 30px;
  width: 30px;
  height: 24px;
  background-position: left top;
  background-size: cover;
}

#header-nav #logo-text {
  display: block;
  width: 119px;
  height: 41px;
  background-position: left top;
}

#header-nav .nav-inner {
  display: block;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

#header-nav .nav-link:hover {
  text-decoration: none;
  color: #929397;
}

#header-nav > .nav-item {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  letter-spacing: 0.1em;
}

#header-nav > .nav-item > .nav-inner {
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  position: relative;
  transition: color 0.5s ease-in-out;
  font-weight: normal;
}

#header-nav > .nav-item > .nav-inner:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: #36383a;
}

#header-nav > .nav-item:hover > .nav-inner {
  color: #000000;
}

#header-nav > .nav-item:hover > .nav-inner:after {
  opacity: 0.99;
}

#header-nav .home {
  flex-grow: 0;
  flex-basis: auto;
  padding: 0 50px;
}

#header-nav .nav-item.home > .nav-link {
  display: block;
}

#header-nav .nav-item.home > .nav-link:after {
  display: none;
}

#header-nav .sub-nav {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #36383a;
  background: rgba(54, 56, 58, 0.99);
  border: 1px solid #ffffff;
  border-top: 0;
  padding: 30px;
}

#header-nav .level1 {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  font-weight: 300;
}

#header-nav .level1 .nav-link {
  transition: all 0.3s ease-in-out;
}

#header-nav > .nav-item:hover .sub-nav {
  visibility: visible;
}

#header-nav > .nav-item:hover .level1 {
  opacity: 1;
}

#header-nav .level1 > .nav-item:nth-child(4n+1) {
  clear: left;
}

#header-nav .level1 > .nav-item.popular {
  clear: left;
  padding-top: 1.5em;
  margin: 0;
  float: none;
  width: 100%;
}

#header-nav .level1 > .nav-item > .nav-inner {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 1em;
  font-weight: 400;
}

#header-nav .level1 > .nav-item > .nav-link:hover {
  border-color: #929397;
}

#header-nav .level2 > .nav-item {
  margin-bottom: 0.3em;
}

#header-nav .shop-nav .level1 > .nav-item {
  width: 21%;
  margin-right: 5%;
}

#header-nav .advice-nav .level1 > .nav-item {
  width: 30%;
  margin-right: 5%;
}

#header-nav .sub-nav .level1 > .nav-item {
  float: left;
}

#header-nav .sub-nav .level1 > .nav-item:last-child {
  margin-right: 0;
}

<header id="site-header">
  <div class="top container">
    <ul id="header-nav">
      <li class="nav-item home" itemscope itemtype="http://schema.org/Organization">
        <a href="/" class="nav-link nav-inner" itemprop="url">
          <span id="logo-ammonite"></span>
          <span id="logo-text" class="sprite" itemprop="name">Site name</span>
          <meta itemprop="description" content="The best shop">
          <link itemprop="logo" href="/images/template/logo.png" rel="logo">
        </a>
      </li>
      <li class="nav-item">
        <a href="/browse-our-range" class="nav-link nav-inner font15">Shop</a>
        <div class="sub-nav shop-nav">
          <ul class="level1 clear">
            <li class="nav-item">
              <a href="/tiles-by-room" class="nav-link nav-inner font16">By Room</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/tiles-for-bathrooms" class="nav-link nav-inner">Bathrooms</a>
                </li>
                <li class="nav-item">
                  <a href="/tiles-for-shower-and-wet-rooms" class="nav-link nav-inner">Showers & Wet Rooms</a>
                </li>
                <li class="nav-item">
                  <a href="/tiles-for-kitchens" class="nav-link nav-inner">Kitchens</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-type" class="nav-link nav-inner font16">By Type</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/wall-tiles" class="nav-link nav-inner">Wall Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/floor-tiles" class="nav-link nav-inner">Floor Tiles</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-room" class="nav-link nav-inner font16">By Material</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/slate-tiles" class="nav-link nav-inner">Slate Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/porcelain-tiles" class="nav-link nav-inner">Porcelain Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/limestone-tiles" class="nav-link nav-inner">Limestone Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/travertine-tiles" class="nav-link nav-inner">Travertine</a>
                </li>
                <li class="nav-item">
                  <a href="/quartzite-tiles" class="nav-link nav-inner">Quartzite Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/marble-tiles" class="nav-link nav-inner">Marble Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/sandstone-tiles" class="nav-link nav-inner">Sandstone Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/wood-effect-tiles" class="nav-link nav-inner">Wood Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/glass-tiles" class="nav-link nav-inner">Glass Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/various-materials-tiles" class="nav-link nav-inner">Various Material Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/basalt-tiles" class="nav-link nav-inner">Basalt Tiles</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-colour" class="nav-link nav-inner font16">By Colour</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/beige-tiles" class="nav-link nav-inner">Beige Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/white-tiles" class="nav-link nav-inner">White Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/black-tiles" class="nav-link nav-inner">Black Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/blue-tiles" class="nav-link nav-inner">Blue Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/brown-tiles" class="nav-link nav-inner">Brown Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/buff-tiles" class="nav-link nav-inner">Buff Tiles</a>
                </li>
              </ul>
            </li>
          </ul>

        </div>
      </li>
      <li class="nav-item">
        <a href="/tiling-ideas" class="nav-link nav-inner font15">Tiling Ideas</a>
      </li>
      <li class="nav-item">
        <strong class="nav-title nav-inner font15">Advice</strong>
        <div class="sub-nav advice-nav">
          <ul class="level1">
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">Pre-Installation</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/coverage-calculator" class="nav-link nav-inner">Coverage Calculator</a></li>
                <li class="nav-item"><a href="/advice/laying-patterns" class="nav-link nav-inner">Laying Patterns</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">Installation &amp; Maintenance</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/tile-installation-instructions" class="nav-link nav-inner">Installation Instructions</a></li>
                <li class="nav-item"><a href="/advice/installing-natural-stone-floors" class="nav-link nav-inner">Installing Natural Stone Floors</a></li>
                <li class="nav-item"><a href="/advice/maintenance-guidelines" class="nav-link nav-inner">Maintenance Guidelines</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">General</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/glossary-of-terms" class="nav-link nav-inner">Glossary of Terms</a></li>
                <li class="nav-item"><a href="/advice/important-information" class="nav-link nav-inner">Important Information</a></li>
                <li class="nav-item"><a href="/advice/frequently-asked-questions" class="nav-link nav-inner">Frequently Asked Questions</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a href="/uk-tile-shops" class="nav-link nav-inner font15">Find a Retailer</a>
      </li>
    </ul>
  </div>
</header>

Answer 1

经过大量调整后，我发现这是由 .nav-item 引起的:

transition: all 0.3s ease-in-out;

这是为了针对颜色和边框颜色过渡，但由于某种原因，它选择了父级不透明度过渡，导致它“似乎”将过渡链接到父级过渡。

如果我将上面的行更改为以下内容，似乎可以解决我的问题:

transition: color 0.3s ease-in-out, border 0.3s ease-in-out; 

固定代码:

ul, li {margin:0; padding:0;}
body {
  background: green;
}

#site-header {
  position: relative;
  z-index: 2;
}

#header-nav {
  display: flex;
  flex-grow: 1;
  transition: width 1s ease-in-out;
  overflow: hidden;
  width: 100%;
  background: #cccccc;
}

#header-nav.closed {
  width: 0;
  flex-grow: 0;
}

#header-nav #logo-ammonite {
  display: block;
  margin-left: 30px;
  width: 30px;
  height: 24px;
  background-position: left top;
  background-size: cover;
}

#header-nav #logo-text {
  display: block;
  width: 119px;
  height: 41px;
  background-position: left top;
}

#header-nav .nav-inner {
  display: block;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

#header-nav .nav-link:hover {
  text-decoration: none;
  color: #929397;
}

#header-nav > .nav-item {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  letter-spacing: 0.1em;
}

#header-nav > .nav-item > .nav-inner {
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  position: relative;
  transition: color 0.5s ease-in-out;
  font-weight: normal;
}

#header-nav > .nav-item > .nav-inner:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: #36383a;
}

#header-nav > .nav-item:hover > .nav-inner {
  color: #000000;
}

#header-nav > .nav-item:hover > .nav-inner:after {
  opacity: 0.99;
}

#header-nav .home {
  flex-grow: 0;
  flex-basis: auto;
  padding: 0 50px;
}

#header-nav .nav-item.home > .nav-link {
  display: block;
}

#header-nav .nav-item.home > .nav-link:after {
  display: none;
}

#header-nav .sub-nav {
  visibility: hidden;
  transition: visibility 0.3s ease-in-out;
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #36383a;
  background: rgba(54, 56, 58, 0.99);
  border: 1px solid #ffffff;
  border-top: 0;
  padding: 30px;
}

#header-nav .level1 {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  font-weight: 300;
}

#header-nav .level1 .nav-link {
  transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
}

#header-nav > .nav-item:hover .sub-nav {
  visibility: visible;
}

#header-nav > .nav-item:hover .level1 {
  opacity: 1;
}

#header-nav .level1 > .nav-item:nth-child(4n+1) {
  clear: left;
}

#header-nav .level1 > .nav-item.popular {
  clear: left;
  padding-top: 1.5em;
  margin: 0;
  float: none;
  width: 100%;
}

#header-nav .level1 > .nav-item > .nav-inner {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 1em;
  font-weight: 400;
}

#header-nav .level1 > .nav-item > .nav-link:hover {
  border-color: #929397;
}

#header-nav .level2 > .nav-item {
  margin-bottom: 0.3em;
}

#header-nav .shop-nav .level1 > .nav-item {
  width: 21%;
  margin-right: 5%;
}

#header-nav .advice-nav .level1 > .nav-item {
  width: 30%;
  margin-right: 5%;
}

#header-nav .sub-nav .level1 > .nav-item {
  float: left;
}

#header-nav .sub-nav .level1 > .nav-item:last-child {
  margin-right: 0;
}

<header id="site-header">
  <div class="top container">
    <ul id="header-nav">
      <li class="nav-item home" itemscope itemtype="http://schema.org/Organization">
        <a href="/" class="nav-link nav-inner" itemprop="url">
          <span id="logo-ammonite"></span>
          <span id="logo-text" class="sprite" itemprop="name">Site name</span>
          <meta itemprop="description" content="The best shop">
          <link itemprop="logo" href="/images/template/logo.png" rel="logo">
        </a>
      </li>
      <li class="nav-item">
        <a href="/browse-our-range" class="nav-link nav-inner font15">Shop</a>
        <div class="sub-nav shop-nav">
          <ul class="level1 clear">
            <li class="nav-item">
              <a href="/tiles-by-room" class="nav-link nav-inner font16">By Room</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/tiles-for-bathrooms" class="nav-link nav-inner">Bathrooms</a>
                </li>
                <li class="nav-item">
                  <a href="/tiles-for-shower-and-wet-rooms" class="nav-link nav-inner">Showers & Wet Rooms</a>
                </li>
                <li class="nav-item">
                  <a href="/tiles-for-kitchens" class="nav-link nav-inner">Kitchens</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-type" class="nav-link nav-inner font16">By Type</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/wall-tiles" class="nav-link nav-inner">Wall Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/floor-tiles" class="nav-link nav-inner">Floor Tiles</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-room" class="nav-link nav-inner font16">By Material</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/slate-tiles" class="nav-link nav-inner">Slate Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/porcelain-tiles" class="nav-link nav-inner">Porcelain Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/limestone-tiles" class="nav-link nav-inner">Limestone Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/travertine-tiles" class="nav-link nav-inner">Travertine</a>
                </li>
                <li class="nav-item">
                  <a href="/quartzite-tiles" class="nav-link nav-inner">Quartzite Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/marble-tiles" class="nav-link nav-inner">Marble Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/sandstone-tiles" class="nav-link nav-inner">Sandstone Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/wood-effect-tiles" class="nav-link nav-inner">Wood Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/glass-tiles" class="nav-link nav-inner">Glass Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/various-materials-tiles" class="nav-link nav-inner">Various Material Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/basalt-tiles" class="nav-link nav-inner">Basalt Tiles</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/tiles-by-colour" class="nav-link nav-inner font16">By Colour</a>

              <ul class="level2">
                <li class="nav-item">
                  <a href="/beige-tiles" class="nav-link nav-inner">Beige Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/white-tiles" class="nav-link nav-inner">White Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/black-tiles" class="nav-link nav-inner">Black Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/blue-tiles" class="nav-link nav-inner">Blue Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/brown-tiles" class="nav-link nav-inner">Brown Tiles</a>
                </li>
                <li class="nav-item">
                  <a href="/buff-tiles" class="nav-link nav-inner">Buff Tiles</a>
                </li>
              </ul>
            </li>
          </ul>

        </div>
      </li>
      <li class="nav-item">
        <a href="/tiling-ideas" class="nav-link nav-inner font15">Tiling Ideas</a>
      </li>
      <li class="nav-item">
        <strong class="nav-title nav-inner font15">Advice</strong>
        <div class="sub-nav advice-nav">
          <ul class="level1">
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">Pre-Installation</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/coverage-calculator" class="nav-link nav-inner">Coverage Calculator</a></li>
                <li class="nav-item"><a href="/advice/laying-patterns" class="nav-link nav-inner">Laying Patterns</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">Installation &amp; Maintenance</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/tile-installation-instructions" class="nav-link nav-inner">Installation Instructions</a></li>
                <li class="nav-item"><a href="/advice/installing-natural-stone-floors" class="nav-link nav-inner">Installing Natural Stone Floors</a></li>
                <li class="nav-item"><a href="/advice/maintenance-guidelines" class="nav-link nav-inner">Maintenance Guidelines</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <strong class="nav-title nav-inner font16">General</strong>
              <ul class="level2">
                <li class="nav-item"><a href="/advice/glossary-of-terms" class="nav-link nav-inner">Glossary of Terms</a></li>
                <li class="nav-item"><a href="/advice/important-information" class="nav-link nav-inner">Important Information</a></li>
                <li class="nav-item"><a href="/advice/frequently-asked-questions" class="nav-link nav-inner">Frequently Asked Questions</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a href="/uk-tile-shops" class="nav-link nav-inner font15">Find a Retailer</a>
      </li>
    </ul>
  </div>
</header>