Issue with initial opacity transition with navbar on responsive design

I have set toggle opacity and hidden transitions on the navbar its working properly.
But theirs an issue when resizing the window screen when the @media query gets hit.
It starts with 100% opacity and then auto starts the transition to 0% and hidden.

It's suppose to start hidden and 0 opacity. But it's not.

I'm guessing that when the @media query get his it adds the class and its default is 100% opacity and shown. And then goes to its set.

https://codepen.io/fernandojcastellanos/pen/ZEoxdQw
Was this page helpful?