Question

我有一个响应式导航，单击按钮时应显示一个菜单。单击时，包含导航列表的ul由jQuery / JS添加一个类（.show-nav）。发生这种情况时，.show-nav的CSS规则会更改opacity和top的值，从而ul会下降。我尝试为此添加过渡，但是ul拒绝对此进行响应。

另一方面，我还有一个header元素，当达到某个y滚动值时，它会更改background-color（也由JS完成）。通过向header添加一个类，并让CSS应用background-color，这与后者完全相同。

function toggleClass(jqo, c) {

  var o = $(jqo);
  if (!o.hasClass(c)) {
    o.addClass(c);
  } else {
    o.removeClass(c);
  }

}

header {
  width: 100%;
  text-align: right;
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s;
}

header .mobile-list {
  display: none;
}

.mobile-header .mobile-list {
  width: 100%;
  height: 100%;
  padding-top: 90px;
  right: 0;
  top: -50%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-color: #005163;
  transition: top 2s, opacity 2s;
}

.show-nav .mobile-list {
  display: block;
  top: 0;
  opacity: 1;
}

.compact {
  background-color: #005163;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <button class="hamburger" onclick="toggleClass('.hamburger', 'is-active'); toggleClass('header', 'show-nav')" type="button">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
    <ul class="mobile-list">
      <li><a href="">PHYSICS</a></li>
      <li><a href="">CHEMISTRY</a></li>
      <li><a href="">BIOLOGY</a></li>
      <li><a href="">MATH</a></li>
      <li><a href="">TOOLS</a></li>
    </ul>
  </nav>
</header>

.compact由JS分配，就像.show-nav一样。但是header正在响应transition，而ul没有响应！
请注意，.mobile-header在每种情况下都处于活动状态，因此不必担心。

我还得出结论，ul确实对所有其他CSS做出了响应，而对过渡没有响应。我看过其他具有相同导航系统的网站（dashlane.com），并试图复制其结构，但无济于事。如何实现ul的过渡，为什么我的header在我的ul没有的地方做出反应？

谢谢。

编辑：在.mobile-header .mobile-list下的CSS中添加了过渡线。编辑：添加了jQuery代码。

Answer 1

您必须知道css display属性不能设置动画，

因此，您必须尝试另一种解决方案，同时最好的属性是visibility和opacity属性。

只需移除display: none / display: block并替换为：

/*Element style when it's hidden*/
.elementStyle {
  opacity: 0;
  visibility: hidden;
}
/*Element style when it's visible*/
.elementStyle {
  opacity: 1;
  visibility: visible;
}

function toggleClass(jqo, c) {

  var o = $(jqo);
  if (!o.hasClass(c)) {
    o.addClass(c);
  } else {
    o.removeClass(c);
  }

}

header {
  width: 100%;
  text-align: right;
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s;
}

.mobile-header .mobile-list {
  width: 100%;
  height: 100%;
  padding-top: 90px;
  right: 0;
  top: -50%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-color: #005163;
  transition: top 2s, opacity 2s;
}

header .mobile-list {
  visibility: hidden;
  transition: 1s;
  /*Add whatever transition you want*/
  opacity: 0;
  display: block;
}

.show-nav .mobile-list {
  top: 0;
  opacity: 1;
  visibility: visible;
}

.compact {
  background-color: #005163;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <button class="hamburger" onclick="toggleClass('.hamburger', 'is-active'); toggleClass('header', 'show-nav')" type="button">Test Button
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
    <ul class="mobile-list">
      <li><a href="">PHYSICS</a></li>
      <li><a href="">CHEMISTRY</a></li>
      <li><a href="">BIOLOGY</a></li>
      <li><a href="">MATH</a></li>
      <li><a href="">TOOLS</a></li>
    </ul>
  </nav>
</header>

单击转换<ul>没有响应

1 个答案: