Javascript 动画在视频结束前淡出

Question

我正在尝试播放视频，然后在完成前 60 秒让 div 淡出到 0 不透明度。我遇到的问题是，在删除 div 上的动画时，它允许视频在开始时淡入，实际上会关闭 div(视频)。我想要实现的是在 60 秒时淡出。我希望实现的是在不影响视频播放的情况下删除 id 动画，然后添加将在结束前 60 秒淡出视频/(div) 的时间码。我可能没有很好地解释这一点，请参阅 JSfiddle。

var callOnce = true;

function aperture(){
        if ((media.duration - media.currentTime) < 60)
        if (callOnce) {
          sync();
          callOnce = false;
        }
}

function sync(){
        "use strict";
        var media = document.getElementById("media");
        media.classList.add("timecode");
        media.classList.remove("animation");
}
setInterval(aperture, 100);

JSFiddle:https://jsfiddle.net/oytqq0jb/

Answer 1

您的时间检测代码是正确的，但是您处理动画的方式是错误的。在这里，我展示了 sync() 及其 CSS 动画应该是什么样子:

function sync () {
  var video = document.querySelector('.video');
  video.classList.add('anim-fade-out');
}
setTimeout(sync, 2000);

.video {
  width: 160px;
  height: 90px;
  background: black;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}
.anim-fade-out {
  animation: fade-out 1s forwards;
}

<div class="video"></div>

只在你想开始淡出的时候添加动画，不需要搞乱running/paused。添加类后，forward 关键字将在动画完成后保持动画的最后状态，在本例中为 opacity: 0