Within my span tag, I am displaying text dynamically over a specific duration by reading a webvtt file. However, I want to change the color of the text during this given duration.
I attempted to achieve this using CSS with transitions and passing the duration dynamically like so:
HTML Tag:
<span :data-text="lyric1" class="word"
:style="'animation-duration:'+duration+'s'">{{ lyric }}
</span>
JavaScript Function:
showSubtitles(){
for(let i = 0; i < this.subtitles.length; i++){
if(this.songStart * 1000 >= this.subtitles[i].start
&& this.songStart * 1000 <= this.subtitles[i].end
){
this.duration =(this.subtitles[i].end - this.subtitles[i].start) / 1000;
this.lyric = this.lyric1 = this.subtitles[i].part;
}
}
this.lyricTimer = setTimeout(function(){this.showSubtitles()}.bind(this), 500);
}
CSS:
.word::after {
content: attr(data-text);
position: absolute;
left: 0;
top: -10;
color: #FFC61E;
overflow: hidden;
width: 0%;
animation: run-text 10s infinite linear;
animation-duration:inherit;
}
@keyframes run-text {
from { width: 0 }
to { width: 100% }
}
Although I provide the correct duration, the transitions do not finish within that time frame, often overlapping or not functioning as intended at all.
I suspect that this issue may stem from CSS struggling to keep up with such dynamic changes. Any suggestions on how to address this problem using native JavaScript or Vue framework would be greatly appreciated.