ビデオ終了前にJavaScriptアニメーションがフェードアウトする

Question

ビデオを再生しようとしていて、完了までに60秒でdivを0の不透明度にフェードアウトさせようとしています。私が抱えている問題は、最初にビデオをフェードインさせることができるdivのアニメーションを削除することで、div（ビデオ）のスイッチをオフに切り替えることです。私が達成したいのは、60秒でのフェードアウトです。私が達成しようとしているのは、ビデオの再生に影響を与えずにidアニメーションを削除し、最後にビデオ/（div）を60秒間フェードアウトするタイムコードを追加することです。私はこれをよく説明していないかもしれませんが、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