CSS3 Div动画相对间距
[英]CSS3 Div Animation Relative Spacing
问题描述
Recently I have asked a similar question about transition animation in divs. 
最近，我问了一个关于div中过渡动画的类似问题。 ( See this post ) （ 请参阅这篇文章 ）
The Code Snippet below shows my solution. 下面的代码段显示了我的解决方案。
However, the animation only works if the width is given in pixels, not as a percentage . 但是，仅当宽度以像素为单位而不是百分比时，动画才起作用 。
Does anybody know a way around this? 有人知道解决这个问题的方法吗？
EDIT (More info to clarify my problem): 编辑（更多信息以澄清我的问题）：
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input. 在网站的此部分中，我的标题应该始终保持不变，并可以在用户输入时“滑动”三页内容。
Thus, the span of the left margin of the page would range from -100% to +100%. 因此，页面左页边距的范围为-100％至+ 100％。
I want a swiping animation so that the user can switch from page 2 (ie displaying an image) to page 3 (ie the text correlating to the image). 我想要滑动动画，以便用户可以从页面2（即显示图像）切换到页面3（即与图像相关的文本）。
Because of different browser window sizes, I need the width to be in percentages. 由于浏览器窗口大小不同，我需要将宽度设置为百分比。 Sadly... 可悲的是...
$(document).ready(function() { $(".next").click(function() { var current = $(".container").css("left"); if (current == "-200px") { current = "-400px"; } else if (current == "0px") { current = "-200px"; } $(".container").css("left", current); }); $(".prev").click(function() { var current = $(".container").css("left"); if (current == "-200px") { current = "0px"; } else if (current == "-400px") { current = "-200px"; } $(".container").css("left", current); }); });
.row { border: 1px solid black; height: 200px; margin: 0; width: 200px; padding: 0; display: block; position: relative; overflow: hidden; } .container { height: 200px; margin: 0; width: 600px; padding: 0; display: block; position: absolute; left: -200px; 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: 200px; float: left; height: 200px; margin: 0; padding: 0; background-color: red; } .div1 { 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> <!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> <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>
2 个解决方案
解决方案1
1 已采纳 2017-01-01 19:56:33
I have changed the left positioning for a transform on the individual elements: 我更改了左侧位置，以对单个元素进行转换：
Now, also, the class row is set to occupy full browser width. 现在，也将类行设置为占据整个浏览器宽度。 The container class is se to 300% (because it will make room for 3 elements). 容器类的设置为300％（因为它将为3个元素腾出空间）。 And the children are set to 33% of this, that at the end is 100% of the row. 子项设置为该行的33％，最后是行的100％。
var pos = 2; /* values 1 - 2 or 3 */ $(document).ready(function() { $(".next").click(function() { if (pos == 1) { $(".container").removeClass("pos1"); $(".container").addClass("pos2"); pos++; } else if (pos == 2) { $(".container").removeClass("pos2"); $(".container").addClass("pos3"); pos++; } }); $(".prev").click(function() { if (pos == 3) { $(".container").removeClass("pos3"); $(".container").addClass("pos2"); pos--; } else if (pos == 2) { $(".container").removeClass("pos2"); $(".container").addClass("pos1"); pos--; } }); });
.row { border: 1px solid black; height: 200px; margin: 0; width: 100%; padding: 0; display: block; position: relative; overflow: hidden; } .container { height: 200px; width: 300%; margin: 0; padding: 0; display: block; position: absolute; top: 0; } .ins { width: 33.33%; height: 200px; margin: 0; padding: 0; float: left; transition: transform 0.5s ease-in-out; } .div1 { background-color: red; } .div2 { background-color: green; } .div3 { background-color: blue; } .pos2 .ins { transform: translateX(-100%); } .pos3 .ins { transform: translateX(-200%); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!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> <div class="row"> <div class="container pos2"> <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>
解决方案2
1 2017-01-01 20:02:15
Narusan, 鸣人
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. 如果我正确地理解了您的目标，那么部分问题是，无论如何，jQuery都希望向您返回px单位。 You can set a percentage value, but it seems it will not then return those percentages to you. 您可以设置一个百分比值，但似乎不会再将这些百分比返回给您。
I changed your code some to demonstrate this: 我更改了您的代码以证明这一点：
$(document).ready(function() { $(".next").click(function() { var current = $(".container").css("left"); console.log(current); if (current == "-200px" || current == "-100%") { current = "-200%"; } else if (current == "0%") { current = "-100%"; } $(".container").css("left", current); }); $(".prev").click(function() { var current = $(".container").css("left"); console.log(current); if (current == "-200px" || current == "-100%") { current = "0%"; } else if (current == "-200%") { current = "-100%"; } $(".container").css("left", current); }); });
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element. 您会看到打印到控制台的值始终以px为单位，但是如果您检查DOM，则会看到在元素上设置了％值。
Approaching the problem very differently, like vals did, seems like a good approach. 像vals一样，以不同的方式处理问题似乎是个好方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.