运行后无法重复 CSS class 删除 function 与 Z686155AF75A60A0F36E9D80C1F7DZED

Question

我无法重复 animation 和 class 修改，在运行一次后由两个按钮中的任何一个触发。 例如，第一次单击“底部底座”：方形闪烁黄色，然后保持蓝色。 再次单击“底部基地”：没有任何变化。

当前行为：

1. 第一次单击“底部底座”：底部方块闪烁黄色然后保持蓝色。
2. 再次单击“底部底座”：底部方块没有任何变化。

期望的行为：

1. 第一次单击“底部底座”：底部方块闪烁黄色然后保持蓝色。
2. 再次单击“底部底座”：底部方块闪烁黄色，然后保持蓝色。

寻求有关如何使这项工作的指导。

https://jsfiddle.net/8ko3tbva/

 const BaseHTMLCollection = [document.getElementById("b1"), document.getElementById("b2")]; function clearBase(b) { BaseHTMLCollection[b].classList.remove("occupiedBase"); BaseHTMLCollection[b].classList.remove("animatedBaseHit"); } function flashBaseColor(b, a) { if (a == "H") { BaseHTMLCollection[b].classList.add("animatedBaseHit"); } } function updateBaseColor(b, a) { BaseHTMLCollection[b].classList.add("occupiedBase"); if (b == 1) { BaseHTMLCollection[b - 1].classList.remove("occupiedBase"); } } function baseAction(base, action) { clearBase(base); flashBaseColor(base, action); updateBaseColor(base, action); }

 #bases { position: absolute; top: 0px; left: 0px; height: 20vw; width: 20vw; margin-top: 5vw; margin-right: 5vw; } #b1 { bottom: 0; left: 0; } #b2 { top: 0; left: 0; }.base { background: rgb(44, 44, 44); border-style: solid; border-width: thick; box-shadow: -8px 8px 20px black; width: 42%; height: 42%; position: absolute; }.animatedBaseHit { animation: pulseBaseHit 0.8s 3; } @keyframes pulseBaseHit { 0% { transform: scale(1.05); background: yellow; } 50% { transform: scale(0.9); background: rgb(44, 44, 44); box-shadow: -2px 2px 20px black; } 100% { transform: scale(1.05); background: yellow; } }.occupiedBase { background: blue; }

 <button type="button" name="bottomBase" onclick="baseAction(0,'H')">Bottom Base</button> <button type="button" name="topBase" onclick="baseAction(1,'H')">Top Base</button> <br><br> <div id="bases"> <div id="b1" class="base"></div> <div id="b2" class="base"></div> </div>

Answer 1

一种解决方案是在添加之前先删除 animation class。 使用 setTimeout 稍微延迟新添加。

 BaseHTMLCollection[b].classList.remove("animatedBaseHit");
 setTimeout(()=>{
     BaseHTMLCollection[b].classList.add("animatedBaseHit");
 });

 const BaseHTMLCollection = [document.getElementById("b1"), document.getElementById("b2")]; function clearBase(b) { BaseHTMLCollection[b].classList.remove("occupiedBase"); BaseHTMLCollection[b].classList.remove("animatedBaseHit"); } function flashBaseColor(b, a) { if (a == "H") { BaseHTMLCollection[b].classList.remove("animatedBaseHit"); setTimeout(()=>{ BaseHTMLCollection[b].classList.add("animatedBaseHit"); }); } } function updateBaseColor(b, a) { BaseHTMLCollection[b].classList.add("occupiedBase"); if (b == 1) { BaseHTMLCollection[b - 1].classList.remove("occupiedBase"); } } function baseAction(base, action) { clearBase(base); flashBaseColor(base, action); updateBaseColor(base, action); }

 #bases { position: absolute; top: 0px; left: 0px; height: 20vw; width: 20vw; margin-top: 5vw; margin-right: 5vw; } #b1 { bottom: 0; left: 0; } #b2 { top: 0; left: 0; }.base { background: rgb(44, 44, 44); border-style: solid; border-width: thick; box-shadow: -8px 8px 20px black; width: 42%; height: 42%; position: absolute; }.animatedBaseHit { animation: pulseBaseHit 0.8s 3; } @keyframes pulseBaseHit { 0% { transform: scale(1.05); background: yellow; } 50% { transform: scale(0.9); background: rgb(44, 44, 44); box-shadow: -2px 2px 20px black; } 100% { transform: scale(1.05); background: yellow; } }.occupiedBase { background: blue; }

 <button type="button" name="bottomBase" onclick="baseAction(0,'H')">Bottom Base</button> <button type="button" name="topBase" onclick="baseAction(1,'H')">Top Base</button> <br><br> <div id="bases"> <div id="b1" class="base"></div> <div id="b2" class="base"></div> </div>