CSS过渡导致短暂导致空白

Question

链接到笔http://codepen.io/mikeCaley/pen/VpYrEq

转换按我想要的方式进行，除非您将鼠标从一侧快速移动到另一侧，您会看到右侧出现空白。

我不明白为什么这是因为所有 div 的转换速度都是一样的。

我想出的唯一解决方法是匹配背景颜色，但是我需要一个更强大的解决方案（并且还想知道为什么会这样）

<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%;
}

由于过渡时间为 0.4 秒，因此用户可以将鼠标悬停在每个滑块环绕 p# 上，并在 0.4 秒内触发其到 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>