CSS過渡問題

Question

我正在嘗試使用CSS過渡創建一個簡單的滑入和滑出菜單，以實現平滑效果。 菜單從左側移至屏幕頂部，具體取決於窗口的大小。

它工作正常，但是當菜單打開時，當我將瀏覽器窗口的大小從大到小調整時。 菜單調整自身大小時會產生怪異的效果。

我無法為自己的生活解決如何解決問題或做錯了什么。

的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> 

Answer 1

將邊框移到內部元素（在其中應用過渡），以避免出現小故障，然后調整一些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>