Javascript动画在视频结束前淡出

Javascript animation fade out before video end

本文关键字：淡出 结束 视频 动画 Javascript      更新时间：2023-09-26

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

你的时间检测代码是正确的，但是你处理动画的方式是错误的。这里我展示了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

相关文章：