I am trying to delay the appearance of mobile nav items (ideally without using JS to delay their appearance) until the nav overlay fully expands (0.4s).
There are two states:
I've read elsewhere that modern browsers will disregard any animation or transition specifications if display: changes. Is this still the case? How can I overcome this and delay the appearance of the nav items until the overlay fully expands?
It appears to be working here: https://codepen.io/KingKabir/pen/QyPwgG but I'm not sure how they are accomplishing it?
I've tried using visibility: and opacity: but they don't completely hide the 4 nav elements in the non-overlay state, thus messing up my name in the right side of the nav menu in the non-overlay state.
HTML:
<nav class="nav_container" id="overlay">
<div class="hamburger" id="hamburger" onclick="mobileMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="icon_personal_container">
<a href="../index.html">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon_personal">
<title>J Logo</title>
<defs>
<linearGradient x1="14.6040568%" y1="100%" x2="85.3959432%" y2="0%" id="linearGradient-1">
<stop stop-color="#12A9FF" offset="0%"></stop>
<stop stop-color="#FF0096" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle fill="#333333" cx="12" cy="11.94" r="12"></circle>
<polygon points="18.57144 7.82616 14.68812 7.82616 12 7.82616 12 5.16 18.57144 5.16"></polygon>
<path d="M12.0021063,5.16 L17.3805494,5.16 L14.6827527,7.80073139 L14.6827527,13.044557 C14.6827527,16.5810127 13.1030779,18.9 9.57770614,18.9 C8.045129,18.9 6.72924975,18.3030871 5.82008559,17.4140986 C5.81142009,17.4056254 6.46074609,16.7540162 7.76806357,15.459271 C8.20030047,15.9163181 8.81488621,16.2138397 9.57770614,16.2138397 C11.2344382,16.2138397 11.985747,15.1509705 11.985747,13.1218565 L11.985747,5.16 L12.0021063,5.16 Z"
fill="url(#linearGradient-1)"></path>
</g>
</svg>
</a>
</div>
<div class="nav_tab" id="nav_tab_about"><a href="#about" class="nav_tab_hover_effect" onclick="mobileMenu()">About</a></div>
<div class="nav_tab" id="nav_tab_work"><a href="#work" class="nav_tab_hover_effect" onclick="mobileMenu()">Work</a></div>
<div class="nav_tab" id="nav_tab_skills"><a href="#skills" class="nav_tab_hover_effect" onclick="mobileMenu()">Skills</a></div>
<div class="nav_tab" id="nav_tab_contact"><a href="#contact" class="nav_tab_hover_effect" onclick="mobileMenu()">Contact</a></div>
<div class="blanks"></div>
<div class="blanks"></div>
<div id="nav_text">Jordan Tranchina</div>
</nav>
CSS:
.nav_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
grid-template-rows: auto;
column-gap: 16px;
grid-template-areas:
"nav-far-left nav-left nav-right nav-far-right";
}
.nav_container.open {
max-height: 100%;
height: 200%;
background-color: #000000;
display: grid;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"nav-far-left nav-left nav-right nav-far-right"
"second second second second"
"third third third third"
"fourth fourth fourth fourth"
"fifth fifth fifth fifth";
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.icon_personal_container,.blanks{
display: none;
}
.nav_tab {
display: block;
height: 0;
width: 0;
visibility: hidden;
opacity: 0;
}
.nav_tab.open{
display: block;
height: auto;
font-size: 32px;
font-weight: 500;
padding-top: 64px;
visibility: visible;
opacity: 1;
transition: visibility 0s linear;
}
#nav_tab_about.open{
grid-area: second;
transition-delay: .10s;
width: auto;
}
#nav_tab_work.open {
grid-area: third;
transition-delay: .15s;
width: auto;
}
#nav_tab_skills.open {
grid-area: fourth;
transition-delay: .2s;
width: auto;
}
#nav_tab_contact.open {
grid-area: fifth;
transition-delay: .25s;
width: auto;
}
#nav_text {
grid-area: 1 / nav-right / 1 / nav-far-right;
}
Javascript:
function mobileMenu() {
document.getElementById("hamburger").classList.toggle("active"); // toggling active class
document.body.classList.toggle("overlay-body"); //toggling overlay state on body
document.getElementById("overlay").classList.toggle("open"); //toggling overlay state on nav by setting classlist to "open"
// improve below by grabing by class not by id
document.getElementById("nav_tab_about").classList.toggle("open");
document.getElementById("nav_tab_work").classList.toggle("open");
document.getElementById("nav_tab_skills").classList.toggle("open");
document.getElementById("nav_tab_contact").classList.toggle("open");
}
I expect the nav elements of class "nav_tab" to appear a few 10ths of a second after the nav_container has time to expand fully.
The current result is that the nav elements of class "nav_tab" appear immediately, before the nav_container has time to expand fully.
If you use visibility and opacity in conjunction with max-height, you can achieve a nice transition from visible to hidden or vice-versa. Setting the element's max-height to 0 when it's hidden, and max-height to Xpx (larger than your element will ever be) when visible, prevents the element from messing with your layout in any way (as you mentioned in your question).
Here's a quick example:
var visible = document.querySelector(".visible");
function hide() {
visible.classList.add("hidden");
}
visible.addEventListener("click", hide);div {
background-color: blue;
padding: 40px;
color: white;
cursor: pointer;
transition: all .1s ease;
}
.visible {
visibility: visible;
opacity: 1;
max-height: 1000px;
}
.hidden {
visibility: hidden;
opacity: 0;
max-height: 0;
}<div class="visible">Click to hide</div>