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

由于转换时长为.4s，因此用户可以将鼠标悬停在每个滑块包装p＃上，并在小于.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>

CSS转换导致短暂的空白

1 个答案: