javascript - Oncuechange事件在html的P标签内触发淡入/淡出动画

Question

我是网络开发的新手，刚开始学习 javascript.. 所以除了学习之外，我正在尝试构建一个网页，其中的歌词将显示在 p 标签内，与音频文件同步。字幕源由 vet 文件扩展名给出，在 javascript“cuechange”事件的帮助下，我试图在 p 标签内注入(inject)胖文本。到现在为止一切正常。但还有一件事我想补充一点，那就是我想在我的 p 标签内的提示更改事件监听器上有一个淡入/淡出效果动画，这意味着对于歌词的每个句子我都想要淡入淡出- 之前和之后的入/淡出动画。 我试图直接在 p 元素上添加 css 动画，但这并没有真正用事件监听器触发它。谁能帮我解决这个问题？

github链接如下:https://github.com/beatzonic/Audio-Lyrics-Subtitle

 document.getElementById('my_audio').textTracks[0].addEventListener('cuechange', function() {
    document.getElementById('lyric').innerText = this.activeCues[0].text;
    
});

body{
    
    margin: 0;
    padding: 0;
}


#lyrics_container{
    width: 100%;
    height: auto;
    padding: 30px;
    box-sizing: border-box;
}

p{
    
    font-size: 2em;
    color: red;
    font-weight: 600;

}



@keyframes fadein{
    
   0% {
        opacity:0;
    }
    100% {
        opacity:1;
    } 
    
}

    <div id="lyrics_container">

        
        <audio id="my_audio" controls>
          <source src="https://github.com/beatzonic/Audio-Lyrics-Subtitle/raw/master/in_case_you_didnt_know.mp3" type="audio/mpeg">
          <track id="sub" kind="subtitles" label="English subtitles" src="https://raw.githubusercontent.com/beatzonic/Audio-Lyrics-Subtitle/master/in_case_you_didnt_know.txt.vtt" srclang="en" default>
          Your browser does not support the audio tag.
        </audio>
        
        <p id="lyric" class="lyrics-class"></p>
        
    </div>
    

Answer 1

您可以编写一个函数，它现在添加一个类并在给定的时间后删除该类。在此处查看此示例。它将 transition 属性添加到给定元素，并向其添加 is-animating 类。然后在 duration 的一半过去后，它将更改 content 并再次删除 is-animating 类。然后在动画完成后，也删除 transition 属性。

此函数将返回另一个使用闭包 的函数。这确保当您尝试在上一个动画完成之前 为文本设置动画时，它会在开始新动画之前先取消上一个动画。否则你会得到重叠的过渡。

function buildAnimator(element, duration) {
    let timeouts = [];

    return function(content) {
        if (timeouts.length > 0) {
          for (const timeout of timeouts) {
            clearTimeout(timeout);
          }

          timeouts.length = 0;
        }

        const halfDuration = duration / 2;
        element.style.transition = `opacity ${halfDuration}ms ease-in-out`;
        element.classList.add('is-animating');

        const firstTimeout = setTimeout(() => {
            element.textContent = content;
            element.classList.remove('is-animating');
        }, halfDuration);

        const secondTimeout = setTimeout(() => {
            element.style.transition = '';
            currentTimeout = null;
        }, duration);

        timeouts.push(firstTimeout, secondTimeout);
    }
}

现在通过调用上面的 buildAnimator 函数来构建你的 animateLyrics 函数，其中包含你想要设置动画的元素和整个动画的持续时间，这样就可以淡入淡出和淡出组合。

然后将其添加到您的 cuechange 事件处理程序中。将新更新的提示文本传递给 animateLyrics 函数，以更改要设置动画的元素的 textContent 属性。

const textTrack = document.getElementById('sub');
const lyric = document.getElementById('lyric');
const animateLyrics = buildAnimator(lyric, 500);

textTrack.addEventListener('cuechange', function(event) {
    animateLyrics(event.target.activeCues[0].text);
});

并且在 CSS 中，告诉浏览器在添加类时应该过渡到什么。例如:

#lyric.is-animating {
    opacity: 0;
}