Set fadeout to timeout function which applies class to hide div-CodePudding

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  id="load"></div>

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

CodePudding user response：

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  id="load">
  <div >
    <span >L</span>
    <span >o</span>
    <span >a</span>
    <span >d</span>
    <span >i</span>
    <span >n</span>
    <span >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

CodePudding user response：

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  id="load">
  <div >
    <span >L</span>
    <span >o</span>
    <span >a</span>
    <span >d</span>
    <span >i</span>
    <span >n</span>
    <span >g</span>

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

CodePudding user response：

Add this to your css:

style.css

.loading {
    opacity: 1;
}

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