CSS3动画滑入式Div
[英]CSS3 Animations Slide-In Div
问题描述
我正在创建一个具有以下基本结构的html文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">
<h1>Title</h1>
<div id="div1"></div>
<div id="div2"></div>
<div id="div2"></div>
</div>
</body>
</html>
现在， #div1和#div3的css3设置为{visibility: hidden} 。
在用户输入上，我希望#div1从左侧滑入并将#div2推出窗口，而#div3分别从右侧滑入。
这是显示它的图像： 我基本上希望它看起来像黑框（浏览器窗口）移动到div。 因此，
#div1必须从左侧滑入，而#div2必须同时/以速度向右滑出。
我尝试使用css3进行此操作，但失败了。 这是我的CSS方法：
#div1 {
position: fixed;
z-index: 3;
visibility: hidden;
transform: translateX(-100%);
}
.slide-left {
visibility: visible;
animation: slide-in 0.5s forwards;
}
@keyframes slide-in {
transform: translateX(0%);
}
有谁能够帮助我？ 那将不胜感激！ 鸣谢，新年快乐！
编辑：感谢kittyCat，我已经达到我的html文件如下所示：
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<style>
.row{
border:1px solid black;
height:100px;
margin:0;
width:100px;
padding:0;
display:block;
position:relative;
overflow:hidden;
}
.container{
height:100px;
margin:0;
width:300px;
padding:0;
display:block;
position:absolute;
left:-100px;
top:0;
-webkit-transition:left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins{
width:100px;
float:left;
height:100px;
margin:0;
padding:0;
background-color:red;
}
.div1 {
background-color: red;
}
.div2{
background-color:green;
}
.div3{
background-color:blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".next").click(function(){
var current = $(".container").css("left");
if(current == "-100px"){
current="-200px";
}
else if(current == "0px"){
current="-100px";
}
$(".container").css("left",current);
});
$(".prev").click(function(){
var current = $(".container").css("left");
if(current == "-100px"){
current="0px";
}
else if(current == "-200px"){
current="-100px";
}
$(".container").css("left",current);});
</script>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
向KittyCat发出巨大的喊叫声，以获取他/她提供的所有帮助。 如果您有相同的问题，并且为您解决了这个问题，请在下面给出答案！
1 个解决方案
解决方案1
1 已采纳 2016-12-31 10:30:45
这是一个jquery解决方案（因为您在注释中对jquery解决方案说了“是”）
$(".next").click(function(){ var current = $(".container").css("left"); if(current == "-100px"){ current="-200px"; } else if(current == "0px"){ current="-100px"; } $(".container").css("left",current); }); $(".prev").click(function(){ var current = $(".container").css("left"); if(current == "-100px"){ current="0px"; } else if(current == "-200px"){ current="-100px"; } $(".container").css("left",current);});
.row{ border:1px solid black; height:100px; margin:0; width:100px; padding:0; display:block; position:relative; overflow:hidden; } .container{ height:100px; margin:0; width:300px; padding:0; display:block; position:absolute; left:-100px; top:0; -webkit-transition:left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } .ins{ width:100px; float:left; height:100px; margin:0; padding:0; background-color:red; } .div2{ background-color:green; } .div3{ background-color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="container"> <div class="ins div1">div-1</div> <div class="ins div2">div-2</div> <div class="ins div3">div-3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button>
编辑：更新问题后
第一个问题是要在body中添加<style>....</style> 。 您应该将其添加到head 。
第二个问题是您要在HTML内容之前添加<script>..</script> 。 所有脚本都应该放在您的身体最后。 在结束body标签之前，就是</body>
解决第二个问题的另一种方法是将您的JavaScript代码包装在$(document).ready(function(){ Insert the code here }); 。 我已经在下面的代码片段中做到了。
<!DOCTYPE html> <html> <!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>TITLE</title> <meta name="Title" content="Main"> <style> .row{ border:1px solid black; height:100px; margin:0; width:100px; padding:0; display:block; position:relative; overflow:hidden; } .container{ height:100px; margin:0; width:300px; padding:0; display:block; position:absolute; left:-100px; top:0; -webkit-transition:left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } .ins{ width:100px; float:left; height:100px; margin:0; padding:0; background-color:red; } .div1 { background-color: red; } .div2{ background-color:green; } .div3{ background-color:blue; } </style> </head> <body> <div class="row"> <div class="container"> <div class="ins div1">div-1</div> <div class="ins div2">div-2</div> <div class="ins div3">div-3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".next").click(function(){ var current = $(".container").css("left"); if(current == "-100px"){ current="-200px"; } else if(current == "0px"){ current="-100px"; } $(".container").css("left",current); }); $(".prev").click(function(){ var current = $(".container").css("left"); if(current == "-100px"){ current="0px"; } else if(current == "-200px"){ current="-100px"; } $(".container").css("left",current);}); }); </script> </body> </html>
CSS3 Div动画
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.