Question

我正在尝试播放视频，然后在完成前六十秒将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动画应该是什么样的：

＆＃13;

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

＆＃13;

.video {
  width: 160px;
  height: 90px;
  background: black;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}
.anim-fade-out {
  animation: fade-out 1s forwards;
}

＆＃13;

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

＆＃13;

仅在您想要开始淡出时添加动画，不需要混淆running / paused。添加课程后，forward关键字会在动画完成动画时保留动画的最后状态，在本例中为opacity: 0

Javascript动画在视频结束前淡出

1 个答案: