背景颜色不褪色
问题描述:
我为一位同学编写了一个简短的脚本,并认为我会展示一个很好的背景褪色,使其看起来更好。我可以实现颜色变化,但不会从一个状态顺利过渡到下一个状态。我认为这会工作,但也许我错了或错过了一些东西。背景颜色不褪色
脚本中的其他内容都可以工作,因此请继续使用,如果您愿意的话。它所做的只是导致屏幕暂停,因此在做其他事情之前可以显示错误或消息。
模板:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Message Expansion Demonstration</title>
<style>
body {
margin:0 auto;
padding:0 0;
height:100%;
width:100%;
text-align:center; }
#haltPage {
display:none;
position:absolute;
height:100%;
width:100%;
top:0px;
background-color:rgba(0, 0, 0, 0.0);
transition: background-color 1s linear .1;
-webkit-transition: background-color 1s linear .1;
-o-transition: background-color 1s linear .1;
z-index=9999;
}
.wrong {
position:relative;
padding:auto auto;
margin:auto auto;
height:250px;
width:400px;
background-color:#666;
border-bottom-left-radius:0.5em 0.5em;
border-bottom-right-radius:0.5em 0.5em;
border-top-left-radius:0.5em 0.5em;
border-top-right-radius:0.5em 0.5em;
box-shadow:5px 10px 25px #000; }
.wrong p {
padding:10px; }
</style>
<script>
function wrong (classID)
{
var on = 'block';
var visable = 'rgba(0, 0, 0, 0.4)';
clearClass ();
document.getElementById('haltPage').style.display = on;
document.getElementById('haltPage').style.backgroundColor = visable;
document.getElementById(classID).style.display = on;
}
function clearClass ()
{
var off = 'none';
document.getElementById('haltPage').style.display = off;
document.getElementById('wrong1').style.display = off;
document.getElementById('wrong2').style.display = off;
document.getElementById('wrong3').style.display = off;
}
</script>
</head>
<body>
<a href="#" onClick="wrong('wrong1')">Wrong Answer One</a><br><br>
<a href="#" onClick="wrong('wrong2')">Wrong Answer Two</a><br><br>
<a href="#" onClick="wrong('wrong3')">Wrong Answer Three</a><br><br>
<!-- This is not seen untill called -->
<div id="haltPage">
<br><br><br>
<div id="wrong1" class="wrong">
<h1>Wrong!</h1>
<p>You are wrong!<br><a href="#" onClick="clearClass();">Close</a></p>
</div>
<div id="wrong2" class="wrong">
<h1>Wrong!</h1>
<p>You are wronger! < Not a word<br><a href="#" onClick="clearClass();">Close</a></p>
</div>
<div id="wrong3" class="wrong">
<h1>Wrong!</h1>
<p>You are wrongest! < duh<br><a href="#" onClick="clearClass()">Close</a></p>
</div>
</div>
</body>
</html>
答
尝试在你的CSS定义添加一个 “S” 值后面的时间 “#haltPage”:
transition: background-color 1s linear .1s;
-webkit-transition: background-color 1s linear .1s;
-o-transition: background-color 1s linear .1s;
您的权利并没有意识到这一点。但是,这仍然没有奏效。我认为这可能是因为我改变了相同的CSS元素。 – 2012-03-22 19:48:40
想要封装它 – 2012-03-22 19:49:04
好吧,试图封装到:我学到的活动状态非常没有意义。我被指向下面这个链接,似乎有我正在寻找的解决方案。 [1]:https://developer.mozilla.org/en/CSS/CSS_transitions#Using_transitions_to_make_JavaScript_functionality_smooth – 2012-03-22 20:45:08