通过 JavaScript 添加时 CSS 动画不起作用答案

【问题标题】：CSS Animation Not Working when Added via JavaScript通过 JavaScript 添加时 CSS 动画不起作用
【发布时间】：2021-11-24 21:08:25
【问题描述】：

我有一个使用 Bootstrap 5 的网页。该网页有一个元素堆叠在另一个元素之上。一段时间后，我试图淡出顶部元素。为了尝试做到这一点，我有：

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;
}

其他 css 类来自 Bootstrap 5。

这个布局就像我想要的那样工作（即“加载”在内容的顶部）。然而，“幕布”并没有淡出。为了使它淡出，我有以下内容：

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

超时按预期运行。我已经在 Chrome 中确认 fade-out 类正在添加到我的元素中。但是，动画没有出现。我的 CSS 动画有什么问题？

【问题讨论】：

标签： css

【解决方案1】：

如果希望animation 保持其最后一个状态，请使用forwards 简写属性

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>

【讨论】：

【解决方案2】：

您的代码没有问题，您可以添加animation-fill-mode: forwards; 所以你的动画不会重置

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>

【讨论】：