我想弄清楚如何处理一些过渡？我有一个叠加div，当点击一个链接时弹出，但我试图让它变成这样它或者淡入div ontop或它只是融入它？
<html>
<head>
<style type="text/css">
a:link, a:visited, a:active {
text-decoration: none;
}
html, body {
max-width: 100%;
max-height: 100%;
margin-right: auto;
margin-left: auto;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
.button {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
float: left;
padding: 10px;
background-color: transparent;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
.blockpurp {
background: purple;
}
.blockyell {
background: yellow;
}
#cover {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease; }
#loginScreen, #loginScreen2 {
padding: 20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
overflow: scroll;
height:100%;
width:100%;
margin:0 auto;
position:fixed;
top: 0px;
left: 0px;
z-index:10;
display:none;
background: rgba(0,0,0,1);
border:0;
color: #fff;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
#loginscreen2 {
background: rgba(23,44,1,0.9);
}
#loginScreen:target, #loginScreen:target + #cover, #loginScreen2:target, #loginScreen2:target + #cover{
display:block;
opacity:9;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease; }
.cancel {
display:block;
position:fixed;
top:0px;
right:0px;
background: transparent;
color:black;
text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<table align="center" width="900px" height="300px">
<td width="60%" class="blockpurp"><a href="#loginScreen" class="button">click</a></td>
<td width="40%" class="blockyell"><a href="#loginScreen2" class="button">click</a></td>
</table>
</div>
<div id="loginScreen">
LOL LOL LOL
<a href="#" class="cancel">×</a>
</div>
<div id="cover" >
</div>
<div id="loginScreen2">
stuff stuff
<a href="#" class="cancel">×</a>
</div>
<div id="cover" >
</div>
</body>
</html>
我尝试使用此代码字符串：
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
但这似乎不起作用？任何想法？
答案 0 :(得分：1)
最大的问题是您从display:none转到display:block。使用css在两者之间没有真正的过渡方式。
相反，您可以将它们全部显示在固定位置，但使用z-index更改外观。
以下是如何执行此操作的示例。
HTML：
<div id="center">
<table>
<td class="blockpurp"><a href="#loginScreen" class="button">click</a></td>
<td class="blockyell"><a href="#loginScreen2" class="button">click</a></td>
</table>
</div>
<div id="loginScreen">
<div>
LOL LOL LOL
<a href="#" class="cancel">×</a>
</div>
</div>
<div id="loginScreen2">
<div>
stuff stuff
<a href="#" class="cancel">×</a>
</div>
</div>
CSS（需要一些严肃的组织！）：
body {
position: relative;
}
#center {
position: fixed;
background: white;
width: 100%;
height: 100%;
z-index: 5;
}
table {
width: 100%;
height: 100%;
}
td {
position: relative;
min-height: 100%;
}
td a {
position: absolute;
width: 100%;
height: 100%;
top:0;
}
.blockpurp {
background: purple;
width: 60%;
}
.blockyell {
background: yellow;
width: 40%;
}
#loginScreen, #loginScreen2 {
opacity: 0;
position: fixed;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.6);
top: 0;
z-index:1;
color: white;
}
#loginScreen div, #loginScreen2 div {
padding: 20px;
background: rgba(0,0,0,1);
}
.cancel {
position:fixed;
top:0px;
right:0px;
background: transparent;
color:black;
text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
#loginScreen:target, #loginScreen2:target {
opacity: 1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
z-index:10;
}
我在你的html中做了以下更改：
答案 1 :(得分：0)
您需要使用jquery来控制鼠标点击事件。
这是sample
$(".sample").click(function(){
$(".popup").css({
'visibility': 'visible',
'opacity': 1
});
});
答案 2 :(得分：0)
到目前为止，无法基于链接点击进行HTML5转换。现在，您可以切换一个类并将CSS过渡附加到受影响的元素（无论如何，它更快+更轻量级）。如果将transition附加到切换类，那么它只会在删除切换类时进行转换，而不是在添加它时进行转换。
这是一个不使用jQuery的例子 - 没有理由包含整个库，如果你没有在其他地方使用它。
<强> HTML
<a id="clickme" href="#">click me</a>
<div id="test" class="clicked fun here">testing</div>
<强>的JavaScript
document.getElementById("clickme").onclick = function (event) {
var target = document.getElementById("test"),
classes = test.className.split(" "),
toggledClass = "clicked";
if (!!~classes.indexOf(toggledClass)) {
// same as if (classes.indexOf(toggledClass) > -1)
test.className = classes.join(" ").replace(toggledClass, "");
} else {
test.className = classes.join(" ") + " " + toggledClass;
}
}
<强> CSS
div {
width: 100px;
height: 3em;
background-color: black;
color: white;
text-align: center;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.clicked {
color: red;
background-color: cyan;
}