CSS Animation Not Working when Added via JavaScript-CodePudding

I have a web page that is using Bootstrap 5. This web page has one element stacked on top of another. After a period of time, I'm trying to fade-out the top element. In an attempt to do this, I have:

HTML

<div id="host" class="position-relative">
  <div id="content" class="position-absolute top-0 left-0 w-100"></div>
  <div id="curtain" class="position-relative top-0 left-0 h-100 opacity-100" style="background-color: orange; z-index:1000;">
        Loading...
  </div>
</div>

CSS

@-webkit-keyframes fade-out {
    from { opacity: 1; }  
    to { opacity: 0; }
}

@keyframes fade-out {
    from { opacity: 1; }  
    to { opacity: 0; }
}

.fade-out {
    -webkit-animation-name: fade-out;
    -webkit-animation-duration: 1s;
    animation-name: fade-out;
    animation-duration: 1s;
}

The other css class are from Bootstrap 5.

This layout works like I want (i.e. the "Loading" is on top of the content). However, the "curtain" doesn't fade out. In an attempt to make it fade out, I have the following:

<script type="text/javascript">
  setTimeout(() => {
    alert('here');
    var curtain = document.getElementById('curtain');
    curtain.classList.add('fade-out');
  }, 5000);
</script>

The timeout behaves as expected. I've confirmed in Chrome that the fade-out class is getting added to my element. However, the animation is not occurring. What is wrong with my CSS animation?

CodePudding user response：

Nothing is wrong with your code you can add animation-fill-mode: forwards; so your animation doesn't reset

setTimeout(() => {
  var curtain = document.getElementById('curtain');
  curtain.classList.add('fade-out');
}, 3000);

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  -webkit-animation-name: fade-out;
  -webkit-animation-duration: 1s;
  animation-name: fade-out;
  animation-duration: 1s;
    animation-fill-mode: forwards;
}

<div id="host" class="position-relative">
  <div id="content" class="position-absolute top-0 left-0 w-100"></div>
  <div id="curtain" class="position-relative top-0 left-0 h-100 opacity-100" style="background-color: orange; z-index:1000;">
    Loading...
  </div>
</div>

CodePudding user response：

If want animation to remain in its last state use forwards in short hand property

setTimeout(() => {
  alert('here');
  var curtain = document.getElementById('curtain');
  curtain.classList.add('fade-out');
}, 5000);

.fade-out-class {
  animation: fade-out 3s;
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
-webkit-animation:  fade-out 5s forwards; 
  animation: fade-out 5s forwards;
}

#curtain {
  position: fixed;
  top: 0;
  left: 0;
  height: 5vw;
  width: 100vh;
}

<div id="host" class="position-relative">
  <div id="content" class="position-absolute top-0 left-0 w-100">You can't see me before as I was under curtain</div>
  <div id="curtain" class="position-relative top-0 left-0 h-100 opacity-100" style="background-color: orange; z-index:1000;">
    Loading...
  </div>
</div>