Transition links div Breite über rechts div und umgekehrt

Question

finden Sie in diesem jsfiddle: https://jsfiddle.net/b53te5qb/1/

Ich versuche, jede dieser div Breiten Übergang zu machen schön über den anderen.

Gerade jetzt ist es ein Instant-Effekt, aber ich möchte für den reibungslosen Übergang. Wenn ich den Übergang versuche, wird es fehlerhaft. Hier

ist die HTML:

<div class="outer"> 
    <div class="color left"></div> 
    <div class="color right"></div> 
</div> 

Und hier ist die CSS so weit:

.outer { 
    position: relative; 
    height: 100px; 
    width: 200px; 
} 

.color { 
    height: 50px; 
    width: 50%; 
    float: left; 
    transition: width 0.3s linear; 
    -webkit-transition: width 0.3s linear; 
} 

.color:hover { 
    width: 100%; 
    position: absolute; 
} 

.left { 
    background-color: #ff0; 
} 

.right { 
    background-color: #0ff; 
} 

Ich bin offen für die Umstrukturierung dieses jedoch würde ich muss, um die Aufgabe abzuschließen. Ich habe dies nur als Beispiel angegeben.

Answer 1

Hier gehen Sie: https://jsfiddle.net/prowseed/b53te5qb/10/

Zwei Techniken, eines mit Flexbox und einer mit Position absolut, wählen Sie eine beliebige :)

.outer { 
    position: relative; 
    height: 100px; 
    width: 666px; 
    display:flex; 
} 

.color { 
    flex: 1; 
    height: 100%; 
    transition: .3s; 
} 

.color:hover { 
    flex-basis:100%; 
} 

.outer2 { 
    margin-top:100px; 
    position: relative; 
    height: 100px; 
    width: 666px; 
} 

.outer2:hover .color { 
    width:0; 
} 

.outer2 .color { 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    width:50%; 
    } 

    .outer2 .color + .color { 
    left:auto; 
    right:0; 
    } 

    .outer2 .color:hover { 
    width:100%; 
    z-index:2; 
    } 

Answer 2

Sie müssen sie unbedingt positionieren, um zu vermeiden, dass sie sich bewegen.

https://jsfiddle.net/b53te5qb/6/

ich sehr die Breite Übergang empfehlen nicht wäre, wäre viel besser, transform: translateX() für den Übergang, da es Hardware beschleunigt und viel glatter wird: https://jsfiddle.net/b53te5qb/8/.

Es muss noch poliert werden, aber die Idee ist da. (Beachten Sie die overflow: hidden, um zu vermeiden, dass der Überschuss angezeigt wird.) Eine weitere Verbesserung wäre, zwei Elemente oben (50%/50% Breite) zu haben, die den Hover über Javascript auslösen, da es schwierig ist, den Mauszeiger über die Elemente zu halten. oder um den Hover zu entfernen, ohne die Komponente .outer zu verlassen.

Ich hoffe, es hilft.

Answer 3

Wenn Sie tun dies nur mit Unifarben, würde ich über transform: scaleX(). Wenn Sie transition mit transform verwenden, erhalten Sie eine bessere Leistung.

.outer { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 

 
.color { 
 
    height: 50px; 
 
    width: 50%; 
 
    float: left; 
 
    transition: transform 0.3s linear; 
 
    -webkit-transition: transform 0.3s linear; 
 
    transform-origin: 0 0; 
 
} 
 

 
.color:hover { 
 
    transform: scaleX(2); 
 
} 
 

 
.left { 
 
    background-color: #ff0; 
 
} 
 

 
.right { 
 
    background-color: #0ff; 
 
    transform-origin: 100% 0; 
 
}

<div class="outer"> 
 
    <div class="color left"></div> 
 
    <div class="color right"></div> 
 
</div>