Question

有人可以帮我在动画期间删除它们之间的空白区域吗？

我是否需要再添加一个div将div包装成一个？

我选择使用位置顶部来调整我的div动画是导致问题的，如果有的话，请建议我更好的方法来制作这个动画？

＆＃13;

<!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>

＆＃13;

Answer 1

向下移动时，使第二个div元素位于0px而不是300px;

希望它有所帮助。

Answer 2

当第二个div下降时，不要给样式顶部300px，只需将其设置为0px，就像第一个div一样。两个div都是相对的，第一个是第二个，因此它不会是300px 300px + first div。

document.getElementById('second').style.top = '0px';

希望有所帮助，

Answer 3

＆＃13;

<!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>

＆＃13;

Answer 4

因为你的相对定位。使用给定的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;
        }

Answer 5

<!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>

为什么在两个＆＃39; div之间的动画期间？有一个空的空间？

5 个答案: