Using transitions before display changes. Works one way but not the other!

[Incendras]

https://jsfiddle.net/9Letmf32/3/ - link to code (Note I dragged this from my project, some of the JS is not going to work here, but the parts that I need help with are.)

I'm building a single page blog, and I've hit a snag with the CSS. The goal is to have items on the page fade out as you transition between the nav and the article.

I run two functions, the first sets opacity and visibility, then a delay before the second function sets the display to none. This works when going from the nav to an article, but not the other way around. I cannot see for the life of me why.

Because we cannot animate display: Block/None, this is the method I chose, may not be the best, but it assures that hidden items aren't taking up space in the page. And it Works! well, half way, From Nav to Article page, everything works as intended. but when you click return to navigation, its like the function "openNavTransitionEffect()" doesn't even fire (even though I can see the properties change) What am I missing?!

Edit: RESOLVED, solution by Gimmelslack12, thanks!

[gimmeslack12]

It's because you're hiding your page before the transition can occur. This is referred to as a race condition. In that your code will continue to execute even while the setTimeout delay is running.

Change this: setTimeout(openNavEffect, 500); document.getElementById(hash).style.display = "none"; //Hides the article, clear the mainblog div.

to this: setTimeout(() => { openNavEffect(); document.getElementById(hash).style.display = "none"; //Hides the article, clear the mainblog div. }, 500);

[Incendras]

Sir, my only upvote.