javascript - 在 css 翻译动画后删除空格

Question

我想以第一个 div (#splash) 充当初始页面的方式为页面 (#sections) 上的一组 div 设置动画问候用户，然后永远不能再次滚动到/删除。我已经使用 css 转换完成了此操作，但在 #sections 之前占用的位置显示了空格。如何在不显示空格的情况下实现此功能？

const sections = document.querySelector('#sections');
const body = document.body;

function intro() {
    body.classList = 'hide-splash'
}

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        intro()
    }, 1000);
});

#splash,
#main {
  height: 100vh;
  width: 100vw;
}
#sections {
  transform: translateY(0vh);
  transition: transform 1s ease;
}
.hide-splash #sections {
  transform: translateY(-100vh);
}





#splash {
  background-color: #ffa500;
}
#main {
  background-color: lightcyan;
}
#secondary {
  background-color: lightcoral;
}
footer {
  background-color: Aquamarine;
}

<div id="wrapper">
        <div id="sections">
            <div id="splash">SPLASH</div>
            <div id="main">MAIN</div>
            <div id="secondary">
                <ul>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                </ul>
            </div>
            <footer>
                <ul>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                </ul>
            </footer>
        </div>
    </div>

Answer 1

有很多选择:

const sections = document.querySelector('#sections');
const body = document.body;

function intro() {
    body.classList = 'hide-splash'
}

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        intro()
    }, 1000);
});

#splash,
#main {
  height: 100vh;
  width: 100vw;
}
#splash {
  transition: transform 1s, height 1s;
}
.hide-splash #splash {
  transform: translateY(-100vh);
  height: 0;
}


#splash {
  background-color: #ffa500;
}
#main {
  background-color: lightcyan;
}
#secondary {
  background-color: lightcoral;
}
footer {
  background-color: Aquamarine;
}

<div id="wrapper">
        <div id="sections">
            <div id="splash">SPLASH</div>
            <div id="main">MAIN</div>
            <div id="secondary">
                <ul>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                </ul>
            </div>
            <footer>
                <ul>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                </ul>
            </footer>
        </div>
    </div>