CSS翻译动画后删除空格

Question

我想为页面（ #sections ）上的div集合制作动画，以使第一个div（ #splash ）充当启动页面来迎接用户，然后再也不会滚动到/将其删除。 我已经使用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>