将滚动文本的 css 翻译同步到相同的速度（但持续时间不同）

Question

我准备了一个 StackBlitz 应用程序（角度）来展示我的问题。

Application

如您所见，由于文本长度不同，文本以不同的速度移动。 我想要的是动态设置持续时间，以便所有文本动画都具有相同的滚动速度。我目前的计算遗漏了一些东西（或者可能是错误的？），但我无法弄清楚。这可能吗？

Answer 1

解决了。 GetDuration 现在看起来像这样：

getDuration(el: any) {
    const scrollInterval = 25;
    const scrollSpacePx = 1;
    const speed = scrollSpacePx / scrollInterval;
    const durationMs = (el.clientWidth + el.parentElement.clientWidth) / speed;
    const durationSec = durationMs / 1000;

    return durationSec.toString() + "s";
  }