第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

聲波動畫頁面加載器

聲波動畫頁面加載器

桃花長相依 2023-12-14 14:18:41
我有一個看起來像聲波的頁面加載器，但我無法讓它在頁面加載后消失。.preload {    z-index: 10001;    position: fixed;    top: 0;    width: 100%;    height: 100vh;    background-color: #121212;    display: flex;    justify-content: center;    align-items: center;}.bar {    background: #aa1515;    bottom: 1px;    height: 3px;    position: relative;    width: 3px;          animation: sound 0ms -800ms linear infinite alternate;} @keyframes sound {    0% {        opacity: .35;        height: 3px;     }    100% {        opacity: 1;               height: 28px;            }}.bar:nth-child(1)  { left: 1px;  animation-duration: 474ms; }.bar:nth-child(2)  { left: 5px;  animation-duration: 433ms; }.bar:nth-child(3)  { left: 9px;  animation-duration: 407ms; }.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }.preload-finish {    opacity: 0;    pointer-events: none;}window.addEventListener('load', () => {    const preload = document.querySelector('.preload');    preload.classList.add('preload-finish');});當(dāng)某些內(nèi)容加載時，它確實會首先出現(xiàn)，但在頁面加載后無法使其消失。我究竟做錯了什么？
查看完整描述

2 回答

?
蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗 獲得超13個贊

您必須為此事件監(jiān)聽器傳遞一個爭論 (e)


  window.addEventListener('load',(event)=>{

   ...

   ...

  });

如果您仍然收到錯誤，那么這是因為某些文件尚未加載或未找到。


轉(zhuǎn)到 chrome 開發(fā)工具并在控制臺中檢查是否顯示任何錯誤。


它可以是靜態(tài)文件，如圖像、css 文件等......


另外，如果您的 javascript 中有任何錯誤，那么load事件也不會觸發(fā)


我嘗試了你的演示預(yù)加載器 ??


window.addEventListener('load',(e)=>{

    $("#preloader").fadeOut();

  });

#preloader {

  position: fixed;

  z-index: 1999;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  height: 100vh;

  width: 100vw;

  background-color: #fff;

}


.bar {

    background: #aa1515;

    bottom: 1px;

    height: 3px;

    position: relative;

    width: 3px;      

    animation: sound 0ms -800ms linear infinite alternate;

}

 

@keyframes sound {

    0% {

        opacity: .35;

        height: 3px; 

    }

    100% {

        opacity: 1;       

        height: 28px;        

    }

}


.bar:nth-child(1)  { left: 1px;  animation-duration: 474ms; }

.bar:nth-child(2)  { left: 5px;  animation-duration: 433ms; }

.bar:nth-child(3)  { left: 9px;  animation-duration: 407ms; }

.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }

.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }

.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }

.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }

.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }

.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }

.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }


.preload-finish {

    opacity: 0;

    pointer-events: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="preloader">

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>

</div>

<button>h4llo </button>


查看完整回答
反對 回復(fù) 2023-12-14
?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗 獲得超4個贊

雖然我不知道實際發(fā)生這種情況的確切原因，但您對各個欄的 CSS 定義似乎干擾了其父容器類.preload到.preload-finish.


您可以通過在切換到類時向欄添加空類定義來解決此問題preloader-finish。


這是一個例子：


document.getElementById("clickMe").addEventListener("click", function() {

  var preload = document.querySelector('.preload');

  preload.classList.add('preload-finish');

  var bars = document.getElementsByClassName("bar");

  for (var a = bars.length - 1; a > 0; a--) {

    bars[a].classList.add('emptyBar');

  }


});

.preload {

  position: fixed;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: #121212;

  display: flex;

  justify-content: center;

  align-items: center;

}


.bar {

  background: #aa1515;

  bottom: 1px;

  height: 3px;

  position: relative;

  width: 3px;

  animation: sound 0ms -800ms linear infinite alternate;

}


@keyframes sound {

  0% {

    opacity: .35;

    height: 3px;

  }

  100% {

    opacity: 1;

    height: 28px;

  }

}


.bar:nth-child(1) {

  left: 1px;

  animation-duration: 474ms;

}


.bar:nth-child(2) {

  left: 5px;

  animation-duration: 433ms;

}


.bar:nth-child(3) {

  left: 9px;

  animation-duration: 407ms;

}


.bar:nth-child(4) {

  left: 13px;

  animation-duration: 458ms;

}


.bar:nth-child(5) {

  left: 17px;

  animation-duration: 400ms;

}


.bar:nth-child(6) {

  left: 21px;

  animation-duration: 427ms;

}


.bar:nth-child(7) {

  left: 25px;

  animation-duration: 441ms;

}


.bar:nth-child(8) {

  left: 29px;

  animation-duration: 419ms;

}


.bar:nth-child(9) {

  left: 33px;

  animation-duration: 487ms;

}


.bar:nth-child(10) {

  left: 37px;

  animation-duration: 442ms;

}


.emptyBar {}


.preload-finish {

  opacity: 0;

  pointer-events: none;

}

<div class="preload">

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

</div>

<button style="position:absolute" id="clickMe">click me</button>


查看完整回答
反對 回復(fù) 2023-12-14
  • 2 回答
  • 0 關(guān)注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號