时间戳

首页 > 解决方案 > 我已经为元素的宽度设置了动画，但是动画开始时元素的边框消失了

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

问题描述

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

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

https://wkkpj.codesandbox.io/

单击页面左侧的白色箭头图标。那个图标在一个盒子里。在它的右边，还有一个盒子。那个“右边的盒子”是边界消失的盒子。尝试扩展和收缩侧边栏几次，您会注意到问题。

我已经尝试将边框移动到单独的元素，并且最初，此代码没有包装器 div。这只是解决问题的又一次尝试。

标签： javascripthtmlcsscss-animations

解决方案

这是因为您将侧边栏从 切换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

推荐阅读