Probleme de transition

Par rif152, il y a 11 ans

Les bases HTML/CSS

Bonsoir,
Je viens vers vous car j'ai un petit souci qui je pense pourtant ne doit pas étre si compliqer :s
Je m'explique:
Losque que je clique sur un element j'ajoute une classe .active a un autre element, cette classe le fait apparaitre tout au dessus de la page avec un background-color a rgba(0,0,0,0.8), mais je voudrait que le background vienne progressivement sur 0.5s, je penait donc utiliser les transitions, mais sa ne fonctionne pas, je vous mt mon code:
structure html:

<div class="button" id="button">...</div> <div class="voile" id="voile"> <div class="voile-content"> ... </div> </div>

css:

.voile { display: none; position: fixed; top:0; left:0; width:100%; height:100%; z-index: 1000; background-color: rgba(0,0,0,0); @include transition (background-color 0.5s); &.active { display: block; background-color: rgba(0,0,0,0.8); .voile-content { ... } } }

et le js:

jQuery(document).ready(function($){ $("#button").click(function(){ $("#voile").addClass("active"); }); });

voila pour le code, du coup sa fonctionne correctement sauf le rendu du background-color qui au lieu de mettre 0.5s avec la transition pour s'afficher, s'affiche tout de suite en rgba(0,0,0,0.8) alors que je voudrais qu'il s'affiche progressivement :s

Merci pour votre aide, j'ai eu beau retourner le probléme dans tout les sens je n'est pas trouver :s

merci a vous Smiley cligne

2 réponses

rif152, il y a 11 ans

Personne n'a une idée ?

rif152, il y a 11 ans

merci pour ta réponse ;)
Du coup le probleme viens du fait que j'utilise la propriété display:none/block, et sa bloque l'effet de transition.... en remplacant ce display par un visibility:hidden/visible, sa fonctionne correctement, je pense qu'en jouant avec les z-index sa pourrait fonctionner aussi...
Entre temp j'ai essayer en remplacant les transitions par des animations css3 sur la classe .active, et sa fonctionne également...

Maintenant la question est y a t'il une solution meilleur qu'une autre, sachant que le rendu est prévu pour du mobile.
@grafikart une idée/un conseil?
Merci a vous ;)