点击转换<ul>没有响应

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

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

所以你必须尝试另一种解决方案，同时最好的是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>