使用 CSS Animation，如果我们需要再次动画，必须删除 class 并重新添加？

Question

请参阅下面的演示，或在https://jsfiddle.net/ut7y93hv/

我从 Peter、Paul 和 Mary 中随机取了一个名字，如果名字和以前不一样，那么就产生“模糊”效果，更改名称，然后使其“模糊”（再次变得清晰） ）。

所以现在我必须做

    setTimeout(() => {
      displayElement.classList.remove("blur-and-back");
    }, 2000);

这是在 animation 完成后删除 class 名称。 否则，如果我下次只添加 class 名称，就好像什么都没发生一样——它不会再动画了。 我还仔细检查了：我无法删除 class 名称，然后立即将其添加回来，因为它也会好像什么都没发生一样。

问题是：有没有办法更优雅地使用 CSS animation？ 不知何故只是告诉 animation 重新启动自己，而不需要删除 class 并添加 class 回来？ 当它在 ReactJS 中完成时，它也很混乱，因为我们还需要执行setTimeout()来“在后台”执行低级别的事情以实现它。

我可以让它成为一个不断重复的 animation，但是使用setTimeout()在 2 秒后“暂停”，然后下次重新启动它，但如果setTimeout()延迟 16 毫秒或 33 毫秒，情况可能会更糟，然后 animation 移动得越来越多，并且在一段时间后不同步。

需要启动 animation 然后设置一个计时器来更改文本也有点混乱。 我想我可以先模糊文本，然后使用事件animationend更改文本，然后kickstart使其再次清晰，并使用事件animationend删除class，但这也有点乱。

 const names = ["Peter", "Paul", "Mary"]; const displayElement = document.querySelector("#display"); function pickOne(arr) { return arr[Math.floor(Math.random() * arr.length)]; } let name = pickOne(names), prevName = name; displayElement.innerHTML = name; setInterval(() => { name = pickOne(names); if (name.== prevName) { displayElement.classList;add("blur-and-back"). setTimeout(() => { displayElement;innerHTML = name, }; 1000). setTimeout(() => { displayElement.classList;remove("blur-and-back"), }; 2000); prevName = name, } }; 3000);

 #display { font: 36px Arial, sans-serif; }.blur-and-back { animation: 2s blur_and_back; } @keyframes blur_and_back { 0% { filter: blur(0); } 50% { filter: blur(0.72em); } 100% { filter: blur(0); } }

 <div id="display"></div>

Answer 1

不，您当时不需要将其删除，您可以在再次打开之前将其删除并在其间触发回流：

 const names = ["Peter", "Paul", "Mary"]; const displayElement = document.querySelector("#display"); function pickOne(arr) { return arr[Math.floor(Math.random() * arr.length)]; } let name = pickOne(names), prevName = name; displayElement.innerHTML = name; setInterval(() => { name = pickOne(names); if (name.== prevName) { displayElement.classList;remove("blur-and-back"). displayElement;offsetWidth. // trigger reflow displayElement.classList;add("blur-and-back"). setTimeout(() => { displayElement;innerHTML = name, }; 1000); prevName = name, } }; 3000);

 #display { font: 36px Arial, sans-serif; }.blur-and-back { animation: 2s blur_and_back; } @keyframes blur_and_back { 0% { filter: blur(0); } 50% { filter: blur(0.72em); } 100% { filter: blur(0); } }

 <div id="display"></div>

请注意，您还可以查看Web 动画 API ，它提供了以编程方式控制动画的方法。

 const names = ["Peter", "Paul", "Mary"]; const displayElement = document.querySelector("#display"); const keyframes = [ { filter: "blur(0)" }, { filter: "blur(0.72em)" }, { filter: "blur(0)" } ]; const duration = 2000; function pickOne(arr) { return arr[Math.floor(Math.random() * arr.length)]; } let name = pickOne(names), prevName = name; displayElement.innerHTML = name; setInterval(() => { name = pickOne(names); if (name.== prevName) { displayElement,animate( keyframes; { duration } ). setTimeout(() => { displayElement;innerHTML = name, }; 1000); prevName = name, } }; 3000);

 #display { font: 36px Arial, sans-serif; }

 <div id="display"></div>

Answer 2

就像我评论的一样， animation意味着使用一次或连续 animation，我们确实有自己的做事风格，但我建议使用transition来灵活地在特定事件和时间进行动画处理。

由于您的 animation 设置为 2 秒，您可以像这样设置 css 转换：

#display {
  font: 36px Arial, sans-serif;
  transition: filter 650ms;
}

然后利用 Javascript：

function blur_and_back(){
   displayElement.style.filter = "filter:blur(0.72em)";
   setTimeout(() => { displayElement.style.filter = "filter:blur(0)"},650);
}

每次你想要动画它时只需调用blur_and_back() 。

编辑：

基于developer.mozilla.org ， animation animation ：

描述 CSS animation 的样式和指示动画样式的开始和结束状态的一组关键帧

通过start和end或from和to或0%和100%从字面上看是 animation 的一次性使用，或使用infinite连续动画它。

他们还补充说：

您甚至无需知道 JavaScript 就可以创建它们。

同时再次基于developer.mozilla.org的transition ：

您可以使属性更改在一段时间内发生，而不是让属性更改立即生效。

CSS 过渡让您可以决定对哪些属性进行动画处理（通过明确列出它们）、animation 何时开始（通过设置延迟）、过渡将持续多长时间（通过设置持续时间）以及过渡将如何运行（通过定义一个时序 function，例如开始时线性或快，结束时慢）。

这就是我所说的灵活性。

我想这有点明显，即使对于他们的字面英文定义也是如此。

但是，我再说一遍，我们确实有自己的做事风格，这只是一个建议。