CSS过渡导致短暂导致空白

Question

链接到笔http://codepen.io/mikecaley/pen/vpyreq

过渡正在工作，除非您将鼠标迅速从一侧移动到另一侧，否则您会看到右边出现了空白。

我不明白为什么这是因为所有divs的过渡速度都是相同的。

我想出的唯一解决方案是匹配背景颜色，但是我需要一个更强大的解决方案（也想知道为什么会发生这种情况）

<div class="slider-wrap">
  <div class="placeholder p1"></div>
  <div class="placeholder p2"></div>
  <div class="placeholder p3"></div>
</div>
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.slider-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  font-size:0;
  outline: solid black 0.1px;
  box-sizing: border-box;
}
.placeholder {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 33.3333%;
  background-color: black;
  background-size: cover;
  background-position: 41% 0px;
  background-repeat: no-repeat;
  transition: width 0.4s linear;
}
.p1 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_2_DNT?$retina$);
  left:0;
}
.p2 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_1_DNT?$retina$);
}
.p3 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_3_DNT?$retina$);
}
.slider-wrap:hover .p1,
.slider-wrap:hover .p2,
.slider-wrap:hover .p3 {
  width:30%;
}
.slider-wrap .p1:hover {
  width: 40%;
}
.slider-wrap .p2:hover {
  width: 40%;
}
.slider-wrap .p3:hover {
  width: 40%;
}

谢谢

Answer 1

白空间出现在手风琴右侧的原因是由于过渡和以下代码。

.slider-wrap:hover .p1,
.slider-wrap:hover .p2,
.slider-wrap:hover .p3 {
  width:30%;
}

由于过渡长度为.4s，因此用户可以将每个滑块包装P＃悬停，并在不到.4s的情况下触发其过渡到width:30%。这将导致每个滑块包装的宽度过渡到重叠，其总宽度在90％至100％之间。

要解决问题，您需要确保p＃的宽度总和永远不少于100％。

一种解决方案是使用Flexbox。通过将.slider-wrap设置为display: flex并设置每个孩子的flex-grow: 1，.slider-wrap中的任何额外空间都将被填充。

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.slider-wrap {
  display:flex;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  font-size:0;
  outline: solid black 0.1px;
  box-sizing: border-box;
}
.placeholder {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 33.3333%;
  background-color: black;
  background-size: cover;
  background-position: 41% 0px;
  background-repeat: no-repeat;
  transition: width 0.4s linear;
  flex-grow:1;
}
.p1 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_2_DNT?$retina$);
  left:0;
}
.p2 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_1_DNT?$retina$);
}
.p3 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_3_DNT?$retina$);
}
.slider-wrap:hover .p1,
.slider-wrap:hover .p2,
.slider-wrap:hover .p3 {
  width:30%;
}
.slider-wrap .p1:hover {
  width: 40%;
}
.slider-wrap .p2:hover {
  width: 40%;
}
.slider-wrap .p3:hover {
  width: 40%;
}

<div class="slider-wrap">
  <div class="placeholder p1"></div>
  <div class="placeholder p2"></div>
  <div class="placeholder p3"></div>
</div>