transition gauche largeur div sur div droite et vice versa

Question

S'il vous plaît se référer à cette jsFiddle: https://jsfiddle.net/b53te5qb/1/

Je cherche à faire chacun de ces largeurs div transition bien sur l'autre.

Pour l'instant, c'est un effet instantané, mais j'aimerais que ça se passe en douceur. Quand j'essaie la transition, ça commence à être buggé.

Voici le code HTML:

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

Et voici le CSS jusqu'à présent:

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

Je suis ouvert à la restructuration ce mais je devrait pour compléter la tâche. Je viens de fournir cela comme un exemple de base.

Answer 1

Ici, vous allez: https://jsfiddle.net/prowseed/b53te5qb/10/

Deux techniques, une avec FlexBox et une position absolue, choisir tout :)

.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

Vous devrez absolument les positionner afin d'éviter leur déplacement.

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

Je recommande vivement la largeur pas la transition, beaucoup mieux serait de transition transform: translateX(), car il sera matériel accéléré et beaucoup plus lisse: https://jsfiddle.net/b53te5qb/8/.

Il faut encore polir, mais l'idée est là. (Notez le overflow: hidden pour éviter de montrer l'excès.) Une autre amélioration serait d'avoir deux éléments en haut (50%/50% de largeur) qui déclenchent le survol via javascript, puisque lorsque les éléments bougent, il est difficile de garder le vol stationnaire, ou pour supprimer le vol stationnaire sans quitter le composant .outer.

Espérons que ça aide.

Answer 3

Si vous faites tout cela avec des couleurs solides, je transformeraient transform: scaleX(). L'utilisation de transition avec transform vous donnera de meilleures performances.

.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>