logo标签列表

为什么在两个div之间的动画中会出现空白间隔？

javascripthtmlcsscss-animations
3

有人能帮我在动画期间去除它们之间的空白吗？

我需要添加一个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>

5个回答
3
不要将样式设置为300px，而是像第一个div一样将其设置为0px，因为第二个div会下移。两个div都是相对定位的，第一个div会推动第二个div，所以它不会是300px，而是300px + 第一个div的高度。
document.getElementById('second').style.top = '0px';

Hope helps,

谢谢你的帮助！非常感激！ - Mohan Ravi
请将Ashish的解决方案标记为答案。他回答得最快。@MohanRavi - Berkay Yaylacı
你真谦虚！ - Mohan Ravi
3

当向下移动时，请将第二个div元素的顶部设置为0px，而不是300px;

希望对您有帮助。

谢谢你的帮助！ - Mohan Ravi
任何时候 @MohanRavi - Ashish Mishra
1

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

@Mohan Ravi，请检查一下。如果有任何疑问，请告诉我。 - Dhaarani
谢谢您的帮助！ - Mohan Ravi
0

这是因为您的相对定位。 请使用给定的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;
        }
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接