CSS transitions jumping with min-width media queries - html

Question

I have a sidebar nav which collapses to make way for more content in a flex layout. When the user clicks to collapse the nav the content area div .ca expands to fill the space and the flex layout reflows using media queries.
See it in action here.
I have applied a CSS transition to each moving element but the .ca div jumps when the nav is opened and closed. This seems to be related to the widths of the units in the flex layout – .songgrid-unit.
The unit has a width value in px but the media queries set a min-width value in % to override this, so as to avoid large empty spaces between break points:
html:
<div class="navbar open ease">
<div class="nav-toggle">
<div class="nt-wrap">
<div class="nt-bar ease" id="ntb-top"></div>
<div class="nt-bar ease" id="ntb-bot"></div>
</div>
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
</div>
</div>
CSS:
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 0.4s ease-in 0s;
-webkit-backface-visibility: hidden;
}
jQuery:
$(".nav-toggle").click(function(){
$(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
If I remove the media queries the transitions work fine, but the min-width values are breaking the effect.
Why is this happening and how can I fix it? Thanks.

Answer 1

It's hard to tell because the code on the site you linked is a bit different from what you posted here. But it seems to me like the .ca div isn't actually jumping, it just looks like it is because as the items inside the grid change in size the number of items per row changes. The jump happens when the items either take up more space so that one fewer can fit in a row, or take up less space so one more can fit per row.
I played with the code you posted here a bit just to demonstrate what I think is happening. I hid the nav and added some outlines around the songgrid-container & individual songgrid items, and then I slowed down the transition a bit. So you can press the blue box and see what the transition looks like in slow motion. It looks like the widths are all transitioning fine, it just jumps when the layout inevitably changes.
Unfortunately I don't have a super easy solution to this, it's not really something you can control with a basic CSS transition. But maybe look at a library like this: https://isotope.metafizzy.co/
I don't actually think the media queries have anything to do with it, but I may also just be completely misunderstanding the effect you are seeing!
$(".nav-toggle").click(function(){
// $(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
left: -214px;
}
.nav-toggle {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
right: -50px;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
background: lightblue;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
outline: 2px solid blue;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255,255,255,.5);
outline: 2px solid gray;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 3s ease-in 0s;
-webkit-backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="navbar open ease">
<div class="nav-toggle">
click
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
</div>
</div>
</body>
</html>

Answer 2

With some help getting onto the right path from the reply from #sparrow here I've found that the transitions can be rendered much smoother by applying further flex properties to the items creating the columns in the grid.
Updating the CSS for the .songgrid-unit class as follows fixes the issue:
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-grow: 1; /*new line*/
flex-shrink: 1; /*new line*/
flex-basis: auto; /*new line*/
flex-direction: column;
justify-content: space-between;
}
With thanks to #sparrow and the authors over at this thread.