使用 setInterval 为字符串更新单独设置动画

Question

在JavaScript我有：

var strArray = ["string 1", "string 2", "string 3"];

和随机字符串update()加载函数：

function update() {
  var randStr= Math.floor(Math.random()*strArray.length);
  s1.innerHTML = strArray[randStr];
}
setInterval(update, 6000);

在html中：

 <div id="s1" class="str1"></div>

我使用 webkit 设置字母间距的动画：

.str1{
  -webkit-animation:compression 6s forwards;
}

@-webkit-keyframes compression {
  from 
  {
    letter-spacing: 1px;  
  } 
  to 
  {  
    letter-spacing: 0px;
  }
}

这个动画自然适用于页面加载，但我想弄清楚，如何为每个新的随机字符串外观

创建更新 setInterval(update, 6000); 的动画

Answer 1

更改动画名称会重新启动动画。

const s1 = document.querySelector(".str1");
let strArray = ["Text1", "Text2", "Text3"];

function update() {
  var randStr = Math.floor(Math.random() * strArray.length);
  s1.innerHTML = strArray[randStr];
  s1.style.animationName = "anything";
  
  setTimeout(() => { // setTimeout needed
    s1.style.animationName = "compression";
  }, 10);
}
setInterval(update, 2000);

.str1 {
  animation: compression 2s forwards;
}

@keyframes compression {
  from {
    letter-spacing: 15px;
  }
  to {
    letter-spacing: 0px;
  }
}

<div id="s1" class="str1">Text</div>

使用 setInterval 为字符串更新单独设置动画

Separate animation for string update with setInterval

html

javascript

css

webkit