28172 sujets

CSS et mise en forme, CSS3

Probleme de transition

Bonsoir, je viens vers vous ce soir car je suis confronter a un problème que je n ai pas réussi a résoudre alors que je suis sur que ce n'est pas compliquer...

La problématique:
Lors d un clique sur un bouton j ajoute une classe a un élément avec jquery, cette élément ce place tout au dessus de la page et a un fond noir transparent de 0.5 (juste le background-color), sa fonctionne correctement mais j aurais voulu que l opacité vienne sur une durée défini... Et ces la le problème impossible de faire fonctionner cela... J ai même essayer avec animate mais on ne peut pas animer les couleur...
Je pense que la solution ce trouve du coter des transitions css3 mais j ai eu beau essayer rien n a fonctionner...

En fait pour résumer, je veut que lorsque je rajoute la classe .active a ma div le background scolie de celle ci passe de rgba(0,0,0,0) a rgba(0,0,0,0.8) et sa sur une durée de 0.5s...
Avec les transitions sa fonctionne correctement quand je teste avec :hover mais je veut que ça le fasse automatiquement des que la classe .active est ajouter...

Je suis sur que la solution est pas si compliqué mais la je sèche...
Merci a vous de m aiguiller et de me remettre sur la bonne route Smiley smile merci pour votre aide Smiley smile
Merci de ta réponse Smiley cligne malheuresement c'est ce que j'avais essayer et ça ne fonctionne pas :s
Je vous met mon code pour y voir plus clair, j'utilise sass avec compass.

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
Modifié par rif5 (20 Mar 2015 - 18:38)
merci Zelalsan, c'est bien ça qui pose probléme Smiley cligne

Du coup j'ai remplacer ce display:block/none par un visibility:hidden/visible, et sa fonctionne correctement, du coup je pense que sa fonctionnerai aussi a une modification du z-index afin de le mettre respectivement dessous puis dessus la page.
Par ailleur j'ai essayer en laissant le display mais plutot que de mettre une transition j'ai mis une animation css3 sur la classe .active, sa fontionne également.

Du coup ma question est maintenant y a t'il une solution meilleur qu'une autre en terme de performance? a savoir que ce rendu est prevu pour une utilisation mobile?

Merci a vous Smiley cligne
Sujet clos
Aller à