CSS3 transition aller, transition retour...

Bonjour,

Je découvre avec merveille la magie du CSS3 (combiné au hack pour notre pote IE...)

J'ai essayé de faire apparaitre un sous menu par un hover sur le menu principal, et ce, en fondu.

Lorsque je "hover", nickel.
Lorsque je "des-hover", que je retire la souris quoi, c'est presque ça... le fondu y est, mais, les éléments se déplacent aussi, et ça, je veux pas.

Voici la page test :

*lien supprimé*

Merci d'avance pour vos réponses =)
Modifié par LightBen (11 Dec 2011 - 18:00)

Bonjour,

plutôt que de passer tes <li> de float:none; à float:left; il faudrait les laisser en float:left; mais les passer de display:none; à display:block; .

Pour le moment tu changes le positionnement de tes items, et c'est visible lors de la deuxième transition. Si tu les places correctement, et que tu joues uniquement sur l'affichage de ces items, tu ne devrais plus avoir ce problème.

a écrit :
plutôt que de passer tes <li> de float:none; à float:left; il faudrait les laisser en float:left; mais les passer de display:none; à display:block;

J'ai essayé là, pas encore de changement, erf

a écrit :
Pour le moment tu changes le positionnement de tes items, et c'est visible lors de la deuxième transition. Si tu les places correctement, et que tu joues uniquement sur l'affichage de ces items, tu ne devrais plus avoir ce problème

C'est ça que je comprends pas encore dans le CSS3, dans transition, j'essaie avec opacity et color, mais ni position, ni all... donc je comprends pas pourquoi ils se déplacent comme ça

Petit up =)

je vois même un effets bizarre après le hover on voit les mots de la liste entremêler mais pas disparaitre de suite

Oui c'est qu'ils sont surement positionnés au même en droit.

Sous IE8, ce site n'est même pas optimisé, comme quoi on peut même pas compter sur IE8, surtout que les utilisateurs de XP peuvent pas avoir plus haut comme IE...

Bref tout ça pour dire que sous IE8, on voit le bug, il reste fixe lorsqu'on passe pas la souris sur le menu...

J'arrive pas encore à débuguer, et je jongle avec pas mal de ul, de li, de CSS3, transition, etc... j'ai pas encore trouvé la bonne combine

J'ai réussi avec un display none bien placé à régler la première partie du problème.

La seconde partie : quand j'enlève la souris, le menu s'enlève cash, j'aurais aimé qu'il s'enlève en transition... là par contre, même sans réfléchir après avoir essayé la ligne CSS de transition dans chaque partie du menu, j'ai pas trouvé

Edit : bon, ben finalement ça rend mieux comme ça
Modifié par LightBen (11 Dec 2011 - 18:00)