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