On-click transitioning <ul> does not respond - html

Question

I have a responsive navigation which should display a menu when a button is clicked. When it is clicked, the ul containing the navigation list is added a class (.show-nav) to by jQuery/JS. When this happens a CSS-rule for .show-nav changes the opacity and top-values, so that the ul comes down. I tried adding a transition to this, but the ul refuses to respond to that.
On the other hand, I also have a header-element, which changes the background-color when a certain y scroll value is reached (also done by JS). This works in the exacly same way as the latter, by adding a class to the header and having the CSS applying a 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>PHYSICS</li>
<li>CHEMISTRY</li>
<li>BIOLOGY</li>
<li>MATH</li>
<li>TOOLS</li>
</ul>
</nav>
</header>
.compact is assigned by JS, just like .show-nav. But header is responding to the transition and the ul is not!
Note that .mobile-header is active in every case, so that's no concern.
I also concluded that the ul does respond to all other CSS, just not the transition. I've looked at other websites (dashlane.com) that have the same kind of navigation system and tried to copy it's structure, but without much avail. How can I achieve the ul having a transition and why does my header react where my ul doesn't?
Thanks in advance.
EDIT:
Added transition line in CSS under .mobile-header .mobile-list.
EDIT: Added jQuery code.

Answer 1

You have to know that the css display property cannot be animated,
So you have to try another solution, best thing at the meanwhile is the visibility and opacity properties.
just remove the display: none / display: block and replace it with:
/*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>PHYSICS</li>
<li>CHEMISTRY</li>
<li>BIOLOGY</li>
<li>MATH</li>
<li>TOOLS</li>
</ul>
</nav>
</header>