javascript - 有没有办法在给定的持续时间内更改跨度文本的颜色？

Question

我有一个 span 标签，我在其中动态显示一些文本在一段时间内，本质上我正在读取 webvtt 文件并根据持续时间在 span 上显示文本。

问题是我想在给定的持续时间内更改文本的颜色，

我已经尝试通过 css 使用带有转换的数据文本并动态传递持续时间来执行此操作，如下所示:

html标签:

<span :data-text="lyric1" class="word" 
:style="'animation-duration:'+duration+'s'">{{ lyric }}
</span>

js函数:

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% }
}

所以我为那个时间给出了正确的持续时间，但过渡只是一团糟，就像没有在那个持续时间内完成，彼此重叠或根本没有按预期工作。

我怀疑这与 css 跟不上这种动态变化有关吗？我将不胜感激关于如何处理 native js 或 vue 框架这个问题的任何想法？

Answer 1

如果您有权访问 WebVTT 文件，则可以直接从 WebVTT 文件轻松设置字幕提示(文本)的样式，如下面的链接所述:

Style WebVTT file within itself