jQuery 宽度为 0% 的 CSS 动画仍然可见

Question

我正在尝试为不同的区域设置动画。观点如下： 有5个区域： A、B、C、D 和 E。

其中 3 个可以同时可见。动画有效，但是当我隐藏必须为 0% 的 2 个区域时，仍然有一条可见的白线。

我尝试使用margin-left: -4px; 修复它，但我认为这不是正确的方法。

在我的示例中，当我关闭 margin-left 时，您可以看到白线。

    $('.EditJob').on('click', function(e) {
      $('.BNone').toggleClass('BGroot BNone');
      $('.CGroot').toggleClass('CKleiner CGroot');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseWorkItemPreview').on('click', function(e) {
      $('.BGroot').toggleClass('BNone BGroot');
      $('.CKleiner').toggleClass('CGroot CKleiner');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

    $('.EditQueueItemPreview').on('click', function(e) {
      $('.AGroot').toggleClass('AKlein AGroot');
      $('.CGroot').toggleClass('CKlein CGroot');
      $('.DNone').toggleClass('DGroot DNone');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseQueueItemPreview').on('click', function(e) {
      $('.AKlein').toggleClass('AGroot AKlein');
      $('.CKlein').toggleClass('CGroot CKlein');
      $('.DGroot').toggleClass('DNone DGroot');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

.AGroot {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.AKlein {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.BGroot {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.BNone {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CGroot {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKlein {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKleiner {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DGroot {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DNone {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.EKlein {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.ENone {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="AGroot">
  <div class="ButtonHide">
    <button class="EditJob">Edit</button>
  </div>
  Area: A
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

<div class="BNone">
  <button class="CloseWorkItemPreview">Close</button>
  Area: B
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="CGroot">
  <div class="ButtonHide">
    <button class="EditQueueItemPreview">Edit</button>
  </div>
  Area: C
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="DNone">
  <button class="CloseQueueItemPreview">Close</button>
  Area: D
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="EKlein">
  Area: E
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

JSFiddle

Answer 1

这是因为您使用的是display: inline-block;，它将尊重元素之间的空白。

解决此问题的最简单方法是删除 html 中 divs 之间的空格。

    $('.EditJob').on('click', function(e) {
      $('.BNone').toggleClass('BGroot BNone');
      $('.CGroot').toggleClass('CKleiner CGroot');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseWorkItemPreview').on('click', function(e) {
      $('.BGroot').toggleClass('BNone BGroot');
      $('.CKleiner').toggleClass('CGroot CKleiner');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

    $('.EditQueueItemPreview').on('click', function(e) {
      $('.AGroot').toggleClass('AKlein AGroot');
      $('.CGroot').toggleClass('CKlein CGroot');
      $('.DNone').toggleClass('DGroot DNone');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseQueueItemPreview').on('click', function(e) {
      $('.AKlein').toggleClass('AGroot AKlein');
      $('.CKlein').toggleClass('CGroot CKlein');
      $('.DGroot').toggleClass('DNone DGroot');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

.AGroot {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.AKlein {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.BGroot {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.BNone {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CGroot {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKlein {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKleiner {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DGroot {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DNone {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.EKlein {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.ENone {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="AGroot">
  <div class="ButtonHide">
    <button class="EditJob">Edit</button>
  </div>
  Area: A
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div><div class="BNone">
  <button class="CloseWorkItemPreview">Close</button>
  Area: B
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="CGroot">
  <div class="ButtonHide">
    <button class="EditQueueItemPreview">Edit</button>
  </div>
  Area: C
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="DNone">
  <button class="CloseQueueItemPreview">Close</button>
  Area: D
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="EKlein">
  Area: E
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

JS Fiddle

Answer 2

白线是由“display: inline-block;”引起的财产。通过使用 inline-block，您可以说它们的行为类似于单词，并且单词之间确实有空格，对吗？有一些技巧可以避免这个问题。最简单的方法是删除部分之间的空白，即删除每个部分之间和每个部分的空白。删除空格将使所有部分像一个单词一样一起工作[单词中的字母之间没有空格，对吗？所以你的部分将变成字母;)]。比如：

</div><div class="BNone">

或

    </div><!--

 --><div class="BNone">

会很好。

但是，您也可以采用不同的方法 - 阅读 great article on CSS tricks。

Answer 3

这是因为 display: inline-block。 要么设置字体大小：0；或使用浮点数。

示例：

display: block;
float: left;

https://jsfiddle.net/seahorsepip/mfvrymwq/3/