Javascript动画在视频结束前淡出

【问题标题】：Javascript animation fade out before video endJavascript动画在视频结束前淡出
【发布时间】：2016-06-29 09:16:02
【问题描述】：

我正在尝试播放视频，然后在完成前 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/

【问题讨论】：

我建议不要使用callOnce，而是使用clearInterval() 来停止计时器，aperture 将不再运行。

标签： javascript css animation

【解决方案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;
}

&lt;div class="video"&gt;&lt;/div&gt;

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

【讨论】：