启动画面阻止网站交互

Question

我有一个基本的网站启动画面。初始屏幕显示后，我的页面上有一些网站交互性，但在初始屏幕显示后它被禁用（我无法再从下拉列表中选择选项）。也许闪屏在消失后仍然存在？有什么办法可以解决这个问题吗？ Here's 我的代码如下：

<html>
 <head>
   <div class="splash">
        <p class ="fade-in">Hi there! This is a splashscreen!<br>
                            It disables everything underneath it<br>
                            I would like to fix this problem<br>
</p>
    </div>

   <form class = 'select-div' title='Choose a field'>
            <select id="numbers">
                <option value="rank"  >Rankings</option>
                <option value="total_cases">Total Cases</option>
                <option value="new_cases">New Cases</option>
                <option value="total_deaths">Total Deaths</option>
                <option value="new_deaths">New Deaths</option>
                <option value="total_recovered">Total Recovered</option>
                <option value="new_recovered">New Recoveries</option>
                <option value="active_cases">Active Cases</option>  
                <option value="critical_cases">Critical Cases</option> 
                <option value="cases_1m">Total Cases/1M people</option>
                <option value="deaths_1m">Deaths/1M people</option>
                <option value="total_tests">Total Tests</option>
                <option value="tests_1m">Tests/1M people</option>
                <option value="population">Country Population</option>
                <option value="cases_x_ppl">1 Case/X People</option>
                <option value="deaths_x_ppl">1 Death/X People</option>
                <option value="tests_x_ppl">1 Test/X People</option>
            </select>
        </form>

.splash{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
}

.splash.display-none{
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fade-in{
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded',(e)=>{
    setTimeout(()=>{
        splash.classList.add('display-none');
    },5000);
})

Answer 1

您的 display-none class 只是将 不透明度 设置为 0，这意味着它仍然呈现，但它是完全透明的。

我可能会将 display-none 重命名为 fading-out，然后创建一个 display-none 的新 class，也就是 display: none。然后，在 CSS 转换完成后（0.5s），添加（新）display-none class.

将 display:none 添加到现有的 class 中的问题是您将失去淡入淡出过渡，因为它会立即转到 display: none。 opacity 可以动画，display 不能。

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded',(e)=>{
 setTimeout(()=>{
  splash.classList.add('fading-out');
    setTimeout(() => {
      splash.classList.add('display-none');
    }, 500); // 500ms = 0.5s = The length of the CSS transition
 },5000);
})

.splash{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
}

.splash.fading-out{
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

.splash.display-none {
  display: none;
}

@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fade-in{
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

   <div class="splash">
  <p class ="fade-in">Hi there! This is a splashscreen!<br>
       It disables everything underneath it<br>
       I would like to fix this problem<br>
</p>
 </div>
   
   <form class = 'select-div' title='Choose a field'>
   <select id="numbers">
    <option value="rank"  >Rankings</option>
    <option value="total_cases">Total Cases</option>
    <option value="new_cases">New Cases</option>
    <option value="total_deaths">Total Deaths</option>
    <option value="new_deaths">New Deaths</option>
    <option value="total_recovered">Total Recovered</option>
    <option value="new_recovered">New Recoveries</option>
    <option value="active_cases">Active Cases</option>  
    <option value="critical_cases">Critical Cases</option> 
    <option value="cases_1m">Total Cases/1M people</option>
    <option value="deaths_1m">Deaths/1M people</option>
    <option value="total_tests">Total Tests</option>
    <option value="tests_1m">Tests/1M people</option>
    <option value="population">Country Population</option>
    <option value="cases_x_ppl">1 Case/X People</option>
    <option value="deaths_x_ppl">1 Death/X People</option>
    <option value="tests_x_ppl">1 Test/X People</option>
   </select>
  </form>

启动画面阻止网站交互

Splash Screen blocking website interaction

javascript

splash-screen

interactive