CSS Transition ne fonctionne pas avec la visibilité: caché

J'ai une page html/css/javascript qui fonctionne parfaitement sauf pour la première fois. Fondamentalement, le divLUMProvideZipCode commence par la classe hidden, mais lorsque vous appuyez sur le bouton, il devient visible. Le problème est qu'il ne s'estompe pas comme il se doit, il apparaît juste immédiatement, sans aucune transition. Après cela, cela fonctionne parfaitement, mais les chances sont que l'utilisateur n'appuiera sur le bouton qu'une fois, deux fois plus haut pour obtenir l'effet, il doit travailler la première fois. Quelqu'un a une idée?CSS Transition ne fonctionne pas avec la visibilité: caché

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Leads User Maintenance</title> 
<link rel="stylesheet" type="text/css" href="LeadsMaintenance.css"/> 
<script> 
    function changeClass() { 
     var doc = document.getElementById("divLUMProvideZipCode"); 
     if (doc.className.indexOf("hidden") >= 0) 
     { 
      doc.className = "visible solidShadowBox";    
     } 
     else 
     { 
      doc.className = "hidden";    
     } 
    }; 
</script> 
</head> 

<body> 

<div class="centeredBodyWrapper"> 
    <div id="divLUMNavigation" class="solidShadowBox"> 
     <button onClick="changeClass()">Show Me</button> 
    </div> 

    <div id="divLUMUserSelect" class="solidShadowBox"> 

    </div> 

    <div id="divLUMUserInformation" class="solidShadowBox"> 
     <div id="divLUMProvideZipCode" class="hidden solidShadowBox"> 
     </div> 
    </div> 
</div> 

</body> 
</html>

CSS:

@charset "utf-8"; 
/* CSS Document */ 
.centeredBodyWrapper { 
    margin: auto; 
    width: 960px; 
} 
#divLUMNavigation { 
    width: 100%; 
    height: 50px; 
    margin: 10px 10px 10px 10px; 
    padding: 5px 5px 5px 5px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 
#divLUMUserSelect { 
    width: 100%; 
    height: 50px; 
    margin: 10px 10px 10px 10px; 
    padding: 5px 5px 5px 5px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 
#divLUMUserInformation { 
    width: 100%; 
    height: 640px; 
    margin: 10px 10px 10px 10px; 
    padding: 5px 5px 5px 5px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 
    #divLUMProvideZipCode { 
     width: 200px; 
     height: 350px; 
     margin: 10px 10px 10px 10px; 
     padding: 5px 5px 5px 5px; 
     position: relative; 
     top: 0px; 
     left: 0px; 
     -webkit-transition: all 1s; 
     -moz-transition: all 1s; 
     -o-transition: all 1s; 
     ms-transition: all 1s; 
     transition: all 1s; 
    } 
.solidShadowBox { 
    -webkit-box-shadow: 0px 0px 8px 0px #909090; 
    -moz-box-shadow: 0px 0px 8px 0px #909090; 
    -o-box-shadow: 0px 0px 8px 0px #909090; 
    -ms-box-shadow: 0px 0px 8px 0px #909090; 
    box-shadow: 0px 0px 8px 0px #909090; 

} 
.hidden { 
    visibility: hidden; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    ms-transition: all 1s; 
    transition: all 1s; 
} 
.visible { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    ms-transition: all 1s; 
    transition: all 1s; 
    visibility: visible 
}

Source

2014-05-09 Volearix

Rien ne se passe ici: http://jsfiddle.net/eCLbs/ – valerio0999

Vous ne savez pas pourquoi, mais cela fonctionne maintenant avec 'Opacity: 0/1'. – Volearix

Essayez d'utiliser l'opacité: 0 dans votre classe cachée et l'opacité: 1 dans votre classe visible instaed de faire la transition sur la visibilité

Source

2014-05-09 12:49:11

aucun effet de transition n'est appliqué à la propriété 'visibility' http://jsfiddle.net/v2N7v/1/ – valerio0999

.hidden {height: 1px; débordement caché; opacité: 0;} .visible {height: auto; opacité: 1; débordement: visible; }

Essayez-le.

Source

2014-05-09 12:56:25

CSS Transition ne fonctionne pas avec la visibilité: caché

Répondre

Questions connexes