javascript - 我已经为元素的宽度设置了动画，但是当动画开始时元素的边框消失了

Question

我的新网页上有一个元素，当它缩小时会改变它的宽度。但是，其中一个子元素设置了 border-bottom 属性，并且边框在动画完成之前就消失了。

我已将我的网站文件上传到 CodeSandbox 以演示该问题，因为在此处发布代码需要完全重写，因为我的脚本是作为模块导入的。

https://wkkpj.codesandbox.io/

单击页面左侧的白色箭头图标。该图标在一个框中。在它的右边，还有另一个盒子。 “右边的框”是边框消失的框。尝试扩展和收缩侧边栏几次，您会发现问题。

我已经尝试将边框移动到一个单独的元素，最初，这段代码没有包装 div。那只是解决问题的另一种尝试。

Answer 1

这是因为您将侧边栏从 grid-template-rows: 30px 1fr; 切换为 grid-template-columns: 30px 0px; 如果您将其省略，您不会有这个问题。我用你的代码做了一个简单的例子:

document.addEventListener('click', function (event) {
  if (!event.target.matches('.toggle')) return;
  event.preventDefault();
  var sidebarLeft = document.getElementById('sidebar-left');
  if (sidebarLeft.classList.contains('clicked')) {
    sidebarLeft.classList.remove('clicked');
  } else {
    sidebarLeft.classList.add('clicked');
  }
}, false);

#body, #wrapper {
  display: grid;
}

#body{
  grid-template-rows: 60px 1fr 30px;
  grid-template-areas: "a a a" "b c d" "e e e";
  grid-template-columns: auto 1fr auto;
  width: 100%;
  height: 100vh;
  background: pink;
}
#header{
  grid-area: a;
}
.sidebar.left {
    grid-area: b;
    width: 240px;
    transition: all 0.5s;
}
.wrapper{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
#content {
  grid-area: c;
  background-color: #0f111aff;
}
.toggle{
  background: gray;
  line-height: 30px;
  width: 30px;
  text-align: center;
  color: white;
  cursor: pointer;
}
#sidebar-left.clicked{
  width: 30px;
}
 

<div id='body'>
  <div id='header'></div>
  
  <div class='sidebar left' id='sidebar-left'>
    <div class='wrapper'>
      <div class='toggle'>
       <
      </div>
    </div>
  </div>
  
  <div id='content'>
   
  </div>
</div>

如果您觉得您绝对需要网格模板。您可以在 0.5 秒(转换持续时间)后使用 js 触发此操作。我试着用 CSS 动画来做，但它似乎没有在 grid-template-rows/grid-template-columns 上出现。

提示 1 - 始终以最简单的问题为例。如果您在此处或至少在我们可以轻松编辑的地方发布代码，这会有所帮助。

技巧 2 - 不要在 HTML 中多次使用相同的 ID