將淡出設定為應用類隱藏div的超時功能

我在我的頁面上添加了一個加載器，它執行 3 秒的影片，然后一個函式將樣式應用于影片以使其不可見。當 'waa' 樣式應用于 'load' div 時，我想添加淡出效果。

setTimeout(function() {
  document.getElementById('load').className = 'waa';
}, 3000);

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: block;
}

.waa {
  opacity: 0;
}

<div class="loading" id="load"></div>

https://codepen.io/ah5ann/pen/oNEBexm

uj5u.com熱心網友回復：

而不是使用 js - 為什么不只使用關鍵幀影片：

@import url(https://fonts.googleapis.com/css?family=Quattrocento Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: block;
  
  animation-delay: 3s;              /* run animation after 3s */
  animation-fill-mode: forwards;    /* stop animation after it has run */
  animation-duration: 1s;           /* make animation run for 1 second */
  animation-name: fadeOut;          /* name of the animation to run - see below */
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}

.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: "Quattrocento Sans", sans-serif;
}

.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
  animation: blur-text 1.5s 0s infinite linear alternate;
}

.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
  animation: blur-text 1.5s 0.2s infinite linear alternate;
}

.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
  animation: blur-text 1.5s 0.4s infinite linear alternate;
}

.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
  animation: blur-text 1.5s 0.6s infinite linear alternate;
}

.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
  animation: blur-text 1.5s 0.8s infinite linear alternate;
}

.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
  animation: blur-text 1.5s 1s infinite linear alternate;
}

.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
  animation: blur-text 1.5s 1.2s infinite linear alternate;
}


@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}


}

<div class="loading" id="load">
  <div class="loading-text">
    <span class="loading-text-words">L</span>
    <span class="loading-text-words">o</span>
    <span class="loading-text-words">a</span>
    <span class="loading-text-words">d</span>
    <span class="loading-text-words">i</span>
    <span class="loading-text-words">n</span>
    <span class="loading-text-words">g</span>
    <div><span style="color:#fff;">made by ASN</span></div>
  </div>
</div>

<div>some page content</div>

如果你想繼續使用 js，那么你需要在transition你的加載類中添加一個影片不透明度

uj5u.com熱心網友回復：

首先，您需要確保使用正確的方法來添加類：

element.classList.add('your-css-class');

這將替換您當前的類別loading：

element.className = 'your-css-class';

然后您可以簡單地使用transition-property 使其淡出。

setTimeout(function() {
  element = document.getElementById("load");

  element.classList.add("waa");
}, 3000);

@import url(https://fonts.googleapis.com/css?family=Quattrocento Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: block;
  transition: visibility 0s 2s, opacity 2s linear;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}

.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: "Quattrocento Sans", sans-serif;
}

.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
  animation: blur-text 1.5s 0s infinite linear alternate;
}

.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
  animation: blur-text 1.5s 0.2s infinite linear alternate;
}

.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
  animation: blur-text 1.5s 0.4s infinite linear alternate;
}

.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
  animation: blur-text 1.5s 0.6s infinite linear alternate;
}

.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
  animation: blur-text 1.5s 0.8s infinite linear alternate;
}

.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
  animation: blur-text 1.5s 1s infinite linear alternate;
}

.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
  animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}


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

.waa {
  opacity: 0;
}

<div class="loading" id="load">
  <div class="loading-text">
    <span class="loading-text-words">L</span>
    <span class="loading-text-words">o</span>
    <span class="loading-text-words">a</span>
    <span class="loading-text-words">d</span>
    <span class="loading-text-words">i</span>
    <span class="loading-text-words">n</span>
    <span class="loading-text-words">g</span>

    <div><span style="color:#fff;">made by ASN</span></div>
  </div>
</div>

uj5u.com熱心網友回復：

將此添加到您的CSS：

樣式.css

.loading {
    opacity: 1;
}

.waa {
    opacity: 0;
    transition: opacity 500ms linear;
}

標籤：javascript html css

上一篇：將影像從api顯示到Reactjs

下一篇：Startdate和Enddate不能代替FullCalendar中的start和end