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>