Question

这是我的CSS

.marquee {
 color: red;
 margin: 0;
 display: inline-block;
 white-space: nowrap;
 animation-name: marquee;
 animation-timing-function: linear;
 animation-duration: 10s;
 animation-iteration-count: infinite;
}

@keyframes marquee{
 0%{
   transform: translate(10%, 0);
 }

100%{
   transform: translate(-100%, 0);
 }

这是我的Javascript函数，用于更新CSS动画持续时间

calcSpeed: function (speed) {
  var spnSelect = document.querySelectorAll('.marquee');

  var i=0;
  for(i=0; i< spnSelect.length; i++) {
    var spnLen = spnSelect[i].offsetWidth;
    var timeTaken = spnLen / speed;
    spnSelect[i].style.animationDuration = timeTaken +'s';
  }
}

我不知道为什么我不能更新CSS动画持续时间。我删除了动画时间并运行代码。文本停止了。我不知道该怎么办。请帮助我。

Answer 1

我认为问题在于您已经将timeTaken的分母和分母切换了

    var i=0;
    for(i=0; i< spnSelect.length; i++){
     var spnLen = spnSelect[i].offsetWidth;
//    var timeTaken = spnLen / speed;
    var timeTaken = speed / spnLen; // this will spread speed over each spnSelect element
    spnSelect[i].style.animationDuration = timeTaken +'s';
    }

Answer 2

有必要吗？问题是缺少括号}。而且您还没有调用函数-text_run(1000);。您还可以在函数调用1000中调整文本速度。

function text_run(speed) {
  var spnSelect = document.querySelectorAll('.marquee');

var i=0;
for(i=0; i< spnSelect.length; i++){
 var spnLen = spnSelect[i].offsetWidth;
var timeTaken = spnLen / speed;
spnSelect[i].style.animationDuration = timeTaken +'s';
}
}

text_run(1000);

.marquee {
 color: red;
 margin: 0;
 display: inline-block;
 white-space: nowrap;
 animation-name: marquee;
 animation-timing-function: linear;
 animation-duration: 10s;
 animation-iteration-count: infinite;
 width: 100%;
}

@keyframes marquee{
 0%{
   transform: translate(100%, 0);
 }

100%{
   transform: translate(0%, 0);
 }

<div class="marquee">
  Test text
</div>

无法更新JavaScript中的CSS动画持续时间

2 个答案: