Oncuechange 事件在 html 的 P 标签内触发一个 fade-in/fade-out 动画

Question

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

githublink如下：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

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

此函数将 return 另一个函数使用 闭包。这确保当您尝试在 之前 之前动画完成前一个动画完成时，它将首先取消前一个动画，然后再开始新动画。否则你会得到重叠的过渡。

function buildAnimator(element, duration) {
    let currentTimeout = null;
    return function(content) {
        if (currentTimeout !== null) clearTimeout(currentTimeout);
        const halfDuration = duration / 2;
        element.style.transition = `opacity ${halfDuration}ms ease-in-out`;
        element.classList.add('is-animating');
        currentTimeout = setTimeout(() => {
            element.textContent = content;
            element.classList.remove('is-animating');
        }, halfDuration);
        currentTimeout = setTimeout(() => {
            element.style.transition = '';
            currentTimeout = null;
        }, duration);
    }
}

现在通过调用上面的 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 中，告诉浏览器在添加 class 时应该过渡到什么。例如：

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