Issues with CSS Transitions

Question

I'm trying to create a simple slide in and out menu using CSS transitions for a smooth effect. The menu moves from the left hand side to the top of the screen depending on the size of the window.

It works fine, but when I resize the browser window from large to small when the menu is open. There's a weird effect when the menu resizes itself.

I can't for the life of me work out how to get around it or what i'm doing wrong.

JSFiddle

$('#menu-button').click(function() { $('#menu').toggleClass('closed'); });

#wrapper { display: grid; grid-template-columns: auto 1fr; height: 100vh; background: #eeeeee; } #menu-wrapper { grid-column: 1; border-right: 1px solid #444444; } #menu { width: 300px; transition: width 1s; } #menu.closed { width: 50px; } #menu-button { width: 50px; height: 50px; float: right; } .bar { width: 35px; height: 5px; background-color: #333; margin: 6px 0; } #content-wrapper { grid-column 2; } @media all and (max-width: 900px) { #wrapper { grid-template-columns: 1fr; grid-template-rows: auto 100%; } #menu-wrapper { grid-row: 1; grid-column: 1; border-bottom: 1px solid; border-right: none; } #menu { width: 100%; height: 100px; transition: height 1s; } #menu.closed { height: 50px; } #content-wrapper { grid-column: 1; grid-row: 2; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="menu-wrapper"> <div id="menu"> <div id="menu-button"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </div> </div> <div id="content-wrapper"> <div id="content"> </div> </div> </div>

@TemaniAfif So when the menu is open. If you resize the window from small to large. The menu uses the transition to resize, but the border doesn't move with it. So you can just see the button slide along the screen. And only once it's stopped does the border then readjust — Jay
– Jay, Commented Oct 7, 2018 at 10:53
move the border to the inner element ... I think you can reduce one div in your code — Temani Afif
– Temani Afif, Commented Oct 7, 2018 at 11:06
@TemaniAfif I can't change the number of divs as they're being generated. But the border change fixes it. Thankyou. Add an answer and I'll accept it — Jay
– Jay, Commented Oct 7, 2018 at 11:21

Temani Afif · Accepted Answer · 2018-10-07 11:55:46Z

Move the border to the inner element (where you apply the transition) to avoid that glitch then adjust some of the CSS:

$('#menu-button').click(function() { $('#menu').toggleClass('closed'); });

#wrapper { display: grid; grid-template-columns: auto 1fr; height: 100vh; background: #eeeeee; } #menu-wrapper { grid-column: 1; } #menu { width: 300px; height: 100%; /*added*/ transition: width 1s; border-right: 1px solid #444444; /*added*/ } #menu.closed { width: 50px; } #menu-button { width: 50px; height: 50px; float: right; } .bar { width: 35px; height: 5px; background-color: #333; margin: 6px 0; } #content-wrapper { grid-column 2; } @media all and (max-width: 900px) { #wrapper { grid-template-columns: 1fr; grid-template-rows: auto 100%; } #menu-wrapper { grid-row: 1; grid-column: 1; border-right: none; } #menu { width: 100%; height: 100px; border-right:none; /*added*/ border-bottom: 1px solid; /*added*/ transition: height 1s; } #menu.closed { height: 50px; width:100%; /*added*/ } #content-wrapper { grid-column: 1; grid-row: 2; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="menu-wrapper"> <div id="menu"> <div id="menu-button"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </div> </div> <div id="content-wrapper"> <div id="content"> </div> </div> </div>

Collectives™ on Stack Overflow

Issues with CSS Transitions

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related