transition CSS causant brièvement causant espace blanc

Question

Lien vers la plume http://codepen.io/mikeCaley/pen/VpYrEq

La transition travaille comme je veux, sauf lorsque vous vous déplacez rapidement votre souris sur d'un côté à l'autre, vous verrez que l'espace blanc apparaît à droite .

Je ne comprends pas pourquoi c'est parce que la vitesse de transition pour tous les divs est la même.

La seule solution que je suis venu avec est de faire correspondre la couleur de fond, mais je besoin d'une solution plus robuste (et voudrais aussi savoir pourquoi cela se produit)

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

Merci

Answer 1

La raison pour laquelle les espaces blancs apparaissent sur le côté droit de l'accordéon est due à la transition et au code suivant.

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

Parce que la transition est longue .4s, l'utilisateur peut survolez chaque curseur-wrap p # et déclencher sa transition vers width:30% en moins de .4s. Cela entraînera le chevauchement de la transition de largeur de chaque coulisseau et leur largeur totale entre 90% et 100%.

Pour résoudre le problème, vous devez vous assurer que la somme des largeurs de p # n'est jamais inférieure à 100%.

Une solution consiste à utiliser une boîte flexible. En définissant .slider-wrap sur display: flex et en définissant le flex-grow: 1 de chaque enfant, tout espace supplémentaire compris entre .slider-wrap sera rempli.

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>