CSS 过渡造成短暂的白色 space

Question

Link来笔http://codepen.io/mikeCaley/pen/VpYrEq

过渡效果如我所愿，但当您快速将鼠标从一侧移到另一侧时，您会看到白色 space 出现在右侧。

我不明白这是为什么，因为所有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

白色space出现在手风琴右侧的原因是因为转换和以下代码。

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

因为过渡时间为 0.4 秒，用户可以将鼠标悬停在每个 slider-wrap p# 上并在不到 0.4 秒的时间内触发其向 width:30% 的过渡。这将导致每个 slider-wrap 的宽度过渡重叠，并且它们的总宽度在 90% 和 100% 之间。

要解决此问题，您需要确保 p# 的宽度总和不小于 100%。

一种解决方案是使用 flexbox。通过将 .slider-wrap 设置为 display: flex 并设置每个 child 的 flex-grow: 1，.slider-wrap 内任何额外的 space 将被填充。

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>

CSS 过渡造成短暂的白色 space

CSS transition causing briefly causing white space

css

transition

transitions

css-transitions