Erweitern eines div über ein anderes div auf schweben mit Übergängen

Question

I divs als Spalten gestylt haben

[div1][div2][div3] 

ich jedes div einzeln auf ein Cursor schweben wie so erweitern möchten (die anderen divs irgendwie überlagert):

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

ich habe es so funktioniert so weit: 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>

Das Problem ist; Ich möchte es weiterführen und den Übergang reibungslos animieren. Aber es wird juckig, wenn ich auch nur einen einfachen Übergang hinzufüge. Ich vermute, es ist weil der Browser zwischen den Divs zwischen den Animationen kämpft.

Hilfe zur Lösung dieses Problems?

Answer 1

Sie können versuchen, absolute die div.item Position, die als Standard. Dann auf ho ändern ver die Breite und die linke Position des div

Eine Probe

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

Statt Positionierung Sie eine CSS3 Lösung auf flexbox Basis verwenden können -

1. hinzufügen display: flex zum container

2. min-width: 0 In der item und flex: 1 1 0% die die flexbox-wachsen gesetzt und schrumpfen, wie es scheint fit und festgelegt a flex-basis von Null.

3. flex-basis: 100%-item:hover hinzufügen und absolute Positionierung

Siehe Demo unten entfernen:

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>