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无法跟上动态变化有关吗？我将对如何处理本机js或vue框架这个想法有任何想法？

Answer 1

如果您有权访问WebVTT文件，则可以按照以下链接中的说明从WebVTT文件中轻松设置字幕提示（文本）的样式：

Style WebVTT file within itself

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

1 个答案: