Question

每次添加新的文本行时，动画都无法保持“流畅”运行是一个问题。

这里的主要问题是，无论添加多少行，我都希望动画的速度保持恒定。为此，每次添加新行时，代码都会重新计算速度。

问题是，当这种情况发生时，整个文本块“跳转”。

我在想，也许我正在使用的整个方法都不会给我我想要的结果，所以问题来了。

是否有解决此问题的解决方案或更好的替代方案？

我有一个带有示例的codepen（每次按任意键都会添加新行，以便我们模拟行为）

https://codepen.io/MrAmericanMike/pen/GeyZJg

非常感谢。

let marqueeContainer = document.getElementById("marqueeContainer");

let marqueeText = document.createElement("p");
marqueeContainer.appendChild(marqueeText);

document.addEventListener("keydown", addText);

let wordCount = 1;

function addText(){
  let things = ['Rock', 'Paper', 'Scissor'];
  let thing = wordCount + " - " + things[Math.floor(Math.random()*things.length)];
  marqueeText.innerHTML += thing + "<br/>";
  calcSpeed(50);
  wordCount++;
}

function calcSpeed(speed) {
    // Time = Distance/Speed
    var spanSelector = document.querySelector('#marqueeContainer p');
    var spanLength = spanSelector.offsetHeight;
    var timeTaken = spanLength / speed;
    spanSelector.style.animationDuration = timeTaken + "s";
}

#marqueeContainer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 200px;
    z-index: 999;
    background-color: rgba(0, 0, 33, 0.5);
    white-space: nowrap;
  overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}

#marqueeContainer p {
    display: inline-block;
    padding-top: 200px;
    animation: marqueeContainer linear infinite;
    color: #FFFFFF;
}

@keyframes marqueeContainer {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(0, -105%); }
}

<div id="marqueeContainer"></div>

流畅的动画CSS和Javascript

0 个答案: