I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieves the functionality, however, the animation appears to be choppy and lacks clarity.
Currently, I am attempting to incorporate a CSS3 transition for smoother animations, but it doesn't seem to animate as expected...
Transitioning from this:
aside {
-webkit-transition: all 1s ease;
width: 270px;
}
To this:
aside {
display: none;
}
No smooth transition occurs between the two states.
Is there a way to animate the disappearance of the navigation bar while expanding the main content to fit the screen?