CSS過渡不能正常工作：隱藏

我有一個html/css/javascript頁面，完美地工作，除了第一次。基本上，divLUMProvideZipCode開始於hidden類，但是當您按下按鈕時，它將變爲可見。問題在於它不會像應該那樣淡入，它只是立即出現，沒有任何轉換。之後，它完美的工作，但很可能用戶只會按一次按鈕，兩次上面以獲得效果，它需要第一次工作。任何人有任何想法？CSS過渡不能正常工作：隱藏

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 
}

來源

2014-05-09 Volearix

這裏什麼也沒有發生：http://jsfiddle.net/eCLbs/ – valerio0999

不確定這是爲什麼，但它現在與'不透明度：0/1'一起工作。 – Volearix

嘗試使用不透明度：在你隱藏的類和不透明度0：在你的可見的類1 instaed能見度

做過渡

來源

2014-05-09 12:49:11

沒有過渡效果適用於'知名度'正當性http://jsfiddle.net/v2N7v/1/ – valerio0999

.hidden {height：1px;溢出：隱藏; opacity：0;} .visible {height：auto;不透明度：1;溢出：可見; }

試試看。

來源

2014-05-09 12:56:25

CSS過渡不能正常工作：隱藏

回答

相關問題