有人能帮我在动画期间去除它们之间的空白吗?
我需要添加一个div将两个div包装在一起吗?
我选择使用position-top来调整我的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>