gpt4 book ai didi

javascript - CSS Transition 不适用于可见性 :hidden

转载 作者:太空宇宙 更新时间:2023-11-03 20:43:39 25 4
gpt4 key购买 nike

我有一个 html/css/javascript 页面可以完美地工作除了第一次。基本上,divLUMProvideZipCodehidden 类开始,但是当您按下按钮时,它将变为可见。问题是它没有像它应该的那样淡入,它只是立即出现,没有任何过渡。在那之后,它工作完美,但用户可能只会按一次按钮,最多两次,所以要获得效果,它需要第一次工作。有人有什么想法吗?

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
}

最佳答案

尝试在隐藏类中使用 opacity:0 并在可见类中使用 opacity:1 instaed 进行可见性转换

关于javascript - CSS Transition 不适用于可见性 :hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23564956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com