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>

如果您确实需要网格模板。您可以使用js在0.5秒（转换持续时间）之后触发此操作。我尝试使用CSS动画进行此操作，但似乎在grid-template-rows / grid-template-columns上没有发现。

提示1-始终以最简单的例子说明问题。如果您将代码发布到此处或至少我们可以轻松对其进行编辑的地方，它会有所帮助。

提示2-不要在HTML中多次使用相同的ID

Answer 2

我做了一些调试：

当您向左滑动时，包装纸没有氨基化。将过渡时间设置为10秒。您会看到包装纸立即收缩。滑回中间时不会发生这种情况。那是我的边界消失了。

其余的取决于您；）

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

2 个答案: