'Set fadeout to timeout function which applies class to hide div

I have added a loader on my page which does the animation for 3 seconds then a function applies styles to the animation to make it not visible. I want to add a fadeout effect when the 'waa' style is applied to the '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

Solution 1:^[1]

Instead of using js - why not just use a keyframes animation:

@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>

If you want to continue to use js, then you would need to add a transition to your loading class to animate the opacity

Solution 2:^[2]

Firstly, you need to make sure you're using the proper method for adding the class:

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

This will replace your current class of loading:

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

Then you can simply use the transition-property to make it fade out.

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>

Solution 3:^[3]

Add this to your css:

style.css

.loading {
    opacity: 1;
}

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Parsa Arvaneh

'Set fadeout to timeout function which applies class to hide div

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]