为什么在两个'div'之间的动画期间有一个空的空间？
[英]Why during animation between two 'div' there is an empty space?
问题描述
Can anyone help me to remove the white space in between them during animation? 
任何人都可以帮助我在动画期间删除它们之间的空白区域吗？
do i need to add one more div wrap both div into one? 我是否需要再添加一个div将div包装成一个？
I have chosen to use position-top to adjust my div animations is that causing the problem and please suggest me a better method to do this animation if any? 我选择使用位置顶部调整我的div动画是导致问题的，请建议我一个更好的方法来做这个动画，如果有的话？
<!DOCTYPE HTML> <html> <head> <style> #top { background: white; color: white; width: 300px; height: 300px; display: inline-block; overflow: hidden; } #first { background: blue; transition: 0.5s; height: 300px; position: relative; } #second { background: green; transition: 0.5s; height: 300px; position: relative; } </style> <script> var up = true; var down = false; function animations() { if (up) { document.getElementById('first').style.top = '-300px'; document.getElementById('second').style.top = '-300px'; up = false; down = true; } else if (down) { document.getElementById('first').style.top = '0px'; document.getElementById('second').style.top = '300px'; down = false; up = true; } } //timer events var startAnimations = setInterval(animations, 1000); </script> </head> <body> <div id="top"> <div id="first">first</div> <div id="second">second</div> </div> </body> </html>
5 个解决方案
解决方案1
3 已采纳 2017-07-28 05:06:02
While moving down make your second div element top 0px instead of 300px; 向下移动使你的第二个div元素顶部为0px而不是300px;
Hope it helps. 希望能帮助到你。
解决方案2
3 2017-07-28 05:06:56
Don't give style top 300px while second div goes down, just set it 0px like first div. 当第二个div下降时，不要给style top 300px ，只需将它设置为0px就像第一个div一样。 Both divs are relative and the first one push the second, so it won't be 300px it will be 300px + first div . 两个div都是相对的，第一个是第二个，因此它不会是300px ，它将是300px + first div 。
document.getElementById('second').style.top = '0px';
Hope helps, 希望有帮助，
解决方案3
1 2017-07-28 05:45:56
<!DOCTYPE HTML> <html> <head> <style> #top { background: white; color: white; width: 300px; height: 300px; display: inline-block; overflow: hidden; } #first { background: blue; transition: 0.5s; height: 300px; position: relative; } #second { background: green; transition: 0.5s; height: 300px; position: relative; } </style> <script> var up = true; var down = false; function animations() { if (up) { up = false; down = true; document.getElementById('first').style.top = '-300px'; document.getElementById('second').style.top = '-300px'; } else if (down) { down = false; up = true; document.getElementById('second').style.top = '0px'; document.getElementById('first').style.top = '0px'; } } //timer events var startAnimations = setInterval(animations, 1000); </script> </head> <body> <div id="top"> <div id="first">first</div> <div id="second">second</div> </div> </body> </html>
解决方案4
0 2017-07-28 05:09:27
Its because of your relative positioning. 这是因为你的相对定位。 Use the given css: 使用给定的css：
#top {
background: white;
color: white;
width: 300px;
height: 300px;
display: inline-block;
overflow: hidden;
position:absolute;
}
#first {
background: blue;
transition: 0.5s;
height: 300px;
width:300px;
position:absolute;
}
#second {
margin:0px;
background: green;
transition: 0.5s;
height: 300px;
width:300px;
position: absolute;
}
解决方案5
0 2017-07-28 06:28:11
<!DOCTYPE HTML> <html> <head> <style> #top { background: white; color: white; width: 300px; height: 300px; display: inline-block; overflow: hidden; } #first { background: blue; transition: 0.5s; height: 300px; position: relative; } #second { background: green; transition: 0.5s; height: 300px; position: relative; } </style> <script> var up = true; var down = false; function animations() { if (up) { document.getElementById('first').style.top = '-300px'; document.getElementById('second').style.top = '-300px'; up = false; down = true; } else if (down) { document.getElementById('first').style.top = '0px'; document.getElementById('second').style.top = '0'; down = false; up = true; } } //timer events var startAnimations = setInterval(animations, 1000); </script> </head> <body> <div id="top"> <div id="first">first</div> <div id="second">second</div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.