Une div se faisant pousser progressivement par une autre (transition css)

Bonjour,

J'ai partiellement réussi à faire une animation d'un bloc qui, lorsqu'il est survolé, se fait pousser par un autre via une transition sur 2 secondes:
https://www.training-dev.fr/Code-Tester/Cin~IME!ds

Cela fonctionne assez bien pour le bloc de droite (le bloc vert .checkbox) qui est masqué au début, puis se déploie sur 2 secondes lorsqu'on survole son bloc parent (le bloc .container).

Mon souci, c'est que le bloc .text passe en un instant de sa taille max à sa taille mini, il n'y a pas de progression. Le texte en en effet immédiatement rogné à sa taille mini. J'ai mis un fond blanc pour qu'on voie mieux. Je souhaiterais que le bloc blanc réduise sa taille durant 2 secondes, poussé par le bloc vert. Ce n'est pas exactement le cas actuellement.

Est-ce que quelqu'un verrait comment modifier le bloc .text pour qu'il ait toujours une taille dynamique (pas une taille définie par avance en pixels) et qu'il réagisse comme je le souhaite (c'est à dire qu'il rétrécisse progressivement sur 2 secondes).

Merci

En changeant transition: transform 2s; par transition: all 2s; c'est mieux... mais pas encore parfait.

Le div de droite ne pousse pas vraiment celui de gauche, il y a un espace entre les 2.
J'ai pensé que c'était peut-être dû à la marge droite de .container, j'ai donc tenté de la mettre à 0 mais cela ne solutionne pas le problème pour autant.

D'autre part, plus grave encore selon moi, le
transition: all fait l'équivalent d'un transition: transform et d'un transition: width.

Or pour des raisons de performances, il n'est recommandé il me semble que d'utiliser les transition: transform et transition: opacity, mais donc pas les transition: width qui repeignent les éléments et nécessites plus de calculs.

Est-ce que vous verriez une solution pour modifier cela de manière à n'utiliser que des transition: transform ou opacity et non le transition: width?

Merci

Bonjour,
pas regardé en détails, on en avait parlé dans cette discussion : https://www.developpez.net/forums/d2...te-se-tronque/
Voir l'exemple sur CodePen : https://codepen.io/NoSmoking/pen/NWNopRZ

Ceci étant le schéma de principe peut-être le suivant :

Code:

---

1 2 3 4

<div class="flex"> <div class="text">Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum</div> <div class="icon">Du texte à voir</div> </div>

---

et le CSS correspondant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.flex { display: flex; align-items: center; padding: .25em .5em; border: 1px solid #CCC; line-height: 3; } .flex .text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #EFD; } .flex .icon { width: 0; overflow: hidden; white-space: nowrap; background-color: #DEF; transition: 2s; } .flex:hover .icon { width: 10em; }

---

à épurer et à adapter ...

Super! Merci beaucoup, ça fonctionne bien!
Cependant le transition: 2s;... ça équivaut bien à un transition: width 2s;... c'est ça?
Dans un cours on nous déconseille d'utiliser les transitions sur d'autres propriétés que transform et opacity, pour des raisons de performances.
Qu'est-ce que tu en penses? Est-ce qu'il est possible de modifier ce code pour l'utiliser sur un transition: transform 2s;?

Citation:

---

on nous déconseille d'utiliser les transitions sur d'autres propriétés que transform et opacity, pour des raisons de performances.
Qu'est-ce que tu en penses?

---

il ne faut pas être aussi catégorique et bien analyser ce que tu souhaites animer et surtout les interactions avec les autres éléments.

Il est néanmoins vrai qu'il est préférable d'animer un élément via un transfrom: translate, par exemple, plutôt que de jouer avec les margin où autre left ...

Les propriétés (fonction) citées ne changent en rien la position dans le flux des éléments concernés donc n'influent pas sur les éléments voisins.

Dans ton cas il y a interaction entre 2 éléments, quand un grandi l'autre diminue donc tu n'aura pas d'autre moyen que de jouer sur la largeur.

Citation:

---

Est-ce qu'il est possible de modifier ce code pour l'utiliser sur un transition: transform 2s;?

---

Attention de ne pas mélanger les deux.

Ok!
Merci beaucoup pour tes réponses NoSmoking!