L'expansion d'une div sur un autre div sur le vol stationnaire avec des transitions

Question

Je divs de style sous forme de colonnes

[div1][div2][div3] 

Je veux développer chaque div individuellement sur un vol stationnaire de curseur comme si (superposant les autres divs en quelque sorte):

[div1..................] 

Je l'ai travailler comme cela jusqu'à présent: https://codepen.io/Cigoler/pen/VMZeaB

body { 
 
    background: #cacaca; 
 
    padding: 5em; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.item { 
 
    padding: 0.25em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 33%; 
 
    height: 200px; 
 
    background: whitesmoke; 
 
    vertical-align: middle; 
 
} 
 

 
.item:hover { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.test1 { 
 
    background: #c3c3c3; 
 
} 
 

 
.test2 { 
 
    background: #fafafa; 
 
} 
 

 
.test3 { 
 
    background: #474747; 
 
    color: white; 
 
}

<div class="row expanded"> 
 
    <div class="container"> 
 
    <div class="item test1"> 
 
     <p>Test One</p> 
 
    </div> 
 
    <div class="item test2"> 
 
     <p>Test Two</p> 
 
    </div> 
 
    <div class="item test3"> 
 
     <p>Test Three</p> 
 
    </div> 
 
    </div> 
 
</div>

Le problème est: Je veux aller plus loin et animer en douceur la transition. Cependant, il devient janky chaque fois que j'ajoute une simple transition. Je suppose que c'est parce que le navigateur se bat entre les divs entre les animations.

Une aide pour résoudre ce problème?

Answer 1

Vous pouvez essayer de faire la position div.item absolue par défaut. Puis sur ho ver changer la largeur et la position gauche de la div

Un échantillon

body { 
 
    background: #cacaca; 
 
    padding: 5em; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    padding: 0.25em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 33%; 
 
    height: 200px; 
 
    background: whitesmoke; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
} 
 
.item:hover { 
 
    cursor: pointer; 
 
    left: 0; 
 
    width: 100%; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    z-index: 999; 
 
} 
 

 
.test1 { 
 
    background: #c3c3c3; 
 
    left: 0px; 
 
} 
 

 
.test2 { 
 
    background: #fafafa; 
 
    left: 33%; 
 
} 
 

 
.test3 { 
 
    background: #474747; 
 
    color: white; 
 
    left: 66%; 
 
}

<div class="row expanded"> 
 
<div class="container"> 
 
    <div class="item test1"> 
 
    <p>Test One</p> 
 
    </div> 
 
    <div class="item test2"> 
 
    <p>Test Two</p> 
 
    </div> 
 
    <div class="item test3"> 
 
    <p>Test Three</p> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

Au lieu de positionnement vous pouvez utiliser une solution CSS3 basée sur flexbox -

1. Ajouter display: flex au container

2. Ajouter min-width: 0 au item et flex: 1 1 0% qui a fixé le flexbox-grandir et rétrécir comme il semble en forme et définir un flex-basis de zéro.

3. Ajouter flex-basis: 100%-item:hover et supprimer positionnement absolu

Voir la démo ci-dessous:

body { 
 
    background: #cacaca; 
 
    padding: 5em; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    display: flex; /* ADDED */ 
 
} 
 

 
.item { 
 
    flex: 1 1 0%; /* ADDED */ 
 
    min-width: 0; /* ADDED */ 
 
    /*padding: 0.25em;*/ 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 33%; 
 
    height: 200px; 
 
    background: whitesmoke; 
 
    vertical-align: middle; 
 
} 
 
.item:hover { 
 
    cursor: pointer; 
 
    /*position: absolute;*/ 
 
    /*left: 0;*/ 
 
    flex-basis: 100%; /* ADDED */ 
 
    -webkit-transition: flex-basis 0.3s ease-out; /* MODIFIED */ 
 
    transition: flex-basis 0.3s ease-out; /* MODIFIED */ 
 
} 
 

 
.test1 { 
 
    background: #c3c3c3; 
 
} 
 

 
.test2 { 
 
    background: #fafafa; 
 
} 
 

 
.test3 { 
 
    background: #474747; 
 
    color: white; 
 
}

<div class="row expanded"> 
 
    <div class="container"> 
 
    <div class="item test1"> 
 
     <p>Test One</p> 
 
    </div> 
 
    <div class="item test2"> 
 
     <p>Test Two</p> 
 
    </div> 
 
    <div class="item test3"> 
 
     <p>Test Three</p> 
 
    </div> 
 
    </div> 
 
</div>