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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

聲波動(dòng)畫頁(yè)面加載器

聲波動(dòng)畫頁(yè)面加載器

桃花長(zhǎng)相依 2023-12-14 14:18:41
我有一個(gè)看起來像聲波的頁(yè)面加載器，但我無(wú)法讓它在頁(yè)面加載后消失。.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)容加載時(shí)，它確實(shí)會(huì)首先出現(xiàn)，但在頁(yè)面加載后無(wú)法使其消失。我究竟做錯(cuò)了什么？
查看完整描述

2 回答

?
蕭十郎

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

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


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

   ...

   ...

  });

如果您仍然收到錯(cuò)誤，那么這是因?yàn)槟承┪募形醇虞d或未找到。


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


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


另外，如果您的 javascript 中有任何錯(cuò)誤，那么load事件也不會(huì)觸發(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>


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

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

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


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


這是一個(gè)例子：


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>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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