28182 sujets

CSS et mise en forme, CSS3

[Résolu] Transition fade-out très brutale

Bonjour à tous,
Je déterre un sujet que j'avais lancé il y a deux ans :
https://forum.alsacreations.com/topic-4-90031-1-Resolu-Opacite-et-transition.html
J'avais mis "résolu" car j'avais pensé m'en sortir, mais... Smiley sweatdrop
Pour faire court, pourquoi mon fade-out se termine brutalement :
https://jsfiddle.net/herde2/2pn0fv4c/11/
Et non pas comme il le faudrait (parfait exemple de pitet ci-dessous) :
https://jsfiddle.net/zhsy7wv1/
Je pensais le souci idiot mais... Smiley murf
Merci et bonne journée,
P.
salut
pfffff, tout ce code pour faire çà?
pourquoi faire simple quand on peut faire TRES compliqué.
200 lignes de css pour faire unfade sur une image et quelques titres.

de plus tu cumule opacity et visibility, çà peut pas, enlève les visibility et çà fonctionne, mais quel b....l
Meilleure solution
Smiley eek
Salut drphilgood Smiley biggol
Si ma mémoire est bonne (c'est vieux tout ça), le ménage n'avait simplement pas été fait. J'avais laissé des effets non nécessaires pour le topic. Honte à moi... ce qui ne veut pas dire qu'il n'y en a pas énormément trop de toutes façons, comme ce "visibility" Smiley hum qui me gâchait la vie.
Ça paraît simple pourtant maintenant Smiley rolleyes Merci énormément.
Bonne journée,
P.
Bonsoir,

Intéressant ce sujet. En réaction à ceci :
drphilgood a écrit :
de plus tu cumule opacity et visibility, çà peut pas

Si si, on peut ; voici ma petite participation :
.fade-in-out {
  transition: opacity 1s ease-in;
  
  &:hover {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    transition: opacity 1s ease-out, visibility 0s 1s ease-out, transform 0s 1s ease-out;
  }
}

Test en ligne : CodePen, fade-in-out
Prévenir un modérateur
Répondre au sujet
Aller à