Question

我有一个html / css / javascript页面，第一次完美地运行除了。基本上，divLUMProvideZipCode从hidden类开始，但是当您按下按钮时它将变为可见。问题是它不会像它应该的那样淡入，只是立即出现，没有任何过渡。在那之后，它工作得很完美，但很可能用户只按一次按钮，两次顶部以便获得效果，它需要第一次工作。有人有任何想法吗？

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
}

Answer 1

尝试在隐藏类中使用不透明度：0并且不透明度：在可见性类中执行1以实现可见性转换

Answer 2

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

试试。

CSS Transition无法使用visibility：hidden

2 个答案: