CSS3动画幻灯片 [英] CSS3 Animations Slide-In Div
本文介绍了CSS3动画幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个基本结构的html文件：
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
< div id =main>
< h1>标题< / h1>
< div id =div1>< / div>
< div id =div2>< / div>
< div id =div2>< / div>
< / div>
< / body>
< / html>
现在，＃div1 和＃div3 有css3设置 {visibility：hidden} 。
在用户输入时， code>＃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向前;
}
@keyframes slide-in {
transform：translateX（0％）;
}
有人可以帮助我吗？这将是非常感谢！
提前感谢和新年快乐，
Narusan
编辑：感谢kittyCat，我已经到了我的html文件的外观如下所示：
<！DOCTYPE html>
< html>
<！ - 感谢kittyCat在stackoverflow.com帮助我这个网站。
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< title> TITLE< / title>
< meta name =Titlecontent =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 -100px）{
current = - 200px;
}
else if（current ==0px）{
current = - 100px;
}
$（。container）css（left，current）;
}）;
$（。prev）。click（function（）{
var current = $（。container）。css（left）;
if -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>上一页< / button>
< button class =next>下一页< / button>
< / body>
< / html>
由KittyCat提供的所有帮助的巨大喊。如果您有相同的问题，并为您解决了这个问题，请按照下面的答案！
解决方案
是一个jquery解决方案（因为你在评论中对jquery解决方案表示赞成）
$（。next）。click（function（）{var current = $（。container）。css（left）; if（current ==-100px）{current = - ;} else if（current ==0px）{current = - 100px;} $（。container）css（left，current）;}）; $（。 （current ==-100px）{current =0px;} else if（current == - ）; if（current == 200px）{current = - 100px;} $（。container）css（left，current）;}）;
.row {border：1px solid black; height：100px; margin：0; width：100px; padding：0;显示：block;位置：相对; overflow：hidden;}。container {height：100px; margin：0; width：300px; padding：0;显示：block;位置：绝对; 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>上一页< / button>< button class =下一页>下一页< / button>
EDIT：更新后的问题 $ b
第一个问题是您在正文中添加< style> ....< / style> code>。您应该将它添加到 head 。
第二个问题是您添加 script> ..< / script> 。所有的脚本应该在你的身体的最后。在结束body标记之前，即< / body>
第二个问题的另一个解决方案是JavaScript代码 $（document）.ready（function（）{插入代码}）; 。
<！DOCTYPE html& < html><！ - 感谢kittyCat在stackoverflow.com帮助我这个网站.-->< head> < meta charset =utf-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < title> TITLE< / title> < meta name =Titlecontent =Main> < style> .row {border：1px solid black; height：100px; margin：0; width：100px; padding：0;显示：block;位置：相对; overflow：hidden; } .container {height：100px; margin：0; width：300px; padding：0;显示：block;位置：绝对; left：-100px; top：0; -webkit-transition：left 0.5s ease-in-out; -moz-transition：left 0.5s ease-in-out;过渡：左0.5s缓入; } .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>上一页< / button> < button class =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>
I'm creating an html file with the basic structure of this:
<!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>
Right now, #div1 and #div3 have the css3 setting {visibility: hidden}.
On User input, I want #div1 slide in from the left and push #div2 out of the window, and #div3 slide in from the right respectively.
Here is an image to show it:
I basically want it to look like the black box(the browser window) moved to the div. So #div1 has to slide in from the left and #div2 has to slide out to the right at the same time/speed.
I tried doing this with css3, but I have failed. Here is my css approach:
#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%);
}
Can anybody help me? That would be very appreciated! Thanks and happy new year in advance, Narusan
EDIT: Thanks to kittyCat, I have come as far as that my html-file looks like the following:
<!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>
A HUGE Shout-Out to KittyCat for all the help that was provided by him/her. If you have the same question and this solved it for you, please upvote the answer given below!
解决方案
Here is a jquery solution (Since you have said yes to the jquery solution in comments)
$(".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>
EDIT : After the updated question
First problem is that you are adding your <style>....</style> in the body. You should add it in head.
Second problem is that you are adding <script>..</script> before your html content. All the scripts should be in the last of your body. Just before ending body tag, that is </body>
Another solution to the second problem is wrapping your javascript code in $(document).ready(function(){ Insert the code here });. I have done that in the below snippet.
<!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动画幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
