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

由於過渡，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>