CSS 过渡的问题答案

【问题标题】：Issues with CSS TransitionsCSS 过渡的问题
【发布时间】：2018-10-07 19:55:46
【问题描述】：

我正在尝试使用 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;
  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 所以当菜单打开时。如果您将窗口大小从小到大。菜单使用过渡来调整大小，但边框不会随之移动。所以你可以看到按钮沿着屏幕滑动。只有当它停止时，边界才会重新调整
将边框移到内部元素...我认为您可以在代码中减少一个 div
@TemaniAfif 我无法在生成 div 时更改它们的数量。但边界变化修复了它。谢谢你。添加一个答案，我会接受它

标签： jquery html css css-transitions transition

【解决方案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>

【讨论】：