Javascript @关键帧动画仅在第一次工作

我在选择中有3个值：石头、纸、剪刀

第一次在“选择”（rock、paper或scissor）中选择一个值时，onChange事件将触发，@keyframes动画将对所有3个值起作用

但第二次我选择任何值时，动画不再工作。 我不明白为什么

代码如下：

正文{
背景：径向梯度（金、黄花）；
字体系列：monospace；
文本对齐：居中；
字体大小：1.5rem；
}
@关键帧示例{
0% {
变换：比例（1）；
}
100% {
转换：比例（1.3）；
}
}
img{
填充：10px；
高度：100px；
宽度：自动；
}
img：悬停{
转换：比例（1.4）；
过渡：所有1；
}

选择
岩石
纸张
剪刀
常量类型=[“纸”、“剪刀”、“石头”]；
函数winner（）{
var index=document.getElementById（“选择”）.selectedIndex；
var userChooice=document.getElementById（“choice”）.value；
var PcChooice=type[Math.floor（Math.random（）*type.length）]；
document.getElementsByClassName（“用户选择”）.item（索引-1）.style=“动画：示例0.5s替换”；
if（PcChooice==userChooice）{
document.getElementById（“结果”）.innerHTML=userChooice+“-”+PcChooice+“：你打成平”；
}否则{
如果（（userChooice==“rock”）&（PcChooice==“剪刀”））{
document.getElementById（“结果”）.innerHTML=userChooice+“-”+PcChooice+“：您赢了”；
}如果（（userChooice==“paper”）&&（PcChooice==“rock”））{
document.getElementById（“结果”）.innerHTML=userChooice+“-”+PcChooice+“：您赢了”；
}如果（（userChooice==“剪刀”）&&（PcChooice==“纸”））{
document.getElementById（“结果”）.innerHTML=userChooice+“-”+PcChooice+“：您赢了”；
}否则{
document.getElementById（“结果”）.innerHTML=userChooice+“-”+PcChooice+“：您松开了”；
}
}
document.getElementById（“选择”）。selectedIndex=0；
};

根据您的代码，最好通过添加与动画结尾相关的事件侦听器来结束功能，从元素样式中删除动画

在winner（）函数的末尾添加以下代码：

document.getElementsByClassName（“用户选择”）.item（索引-1）.addEventListener（“动画结束”，函数（e）{
e、 target.style=“”；
});根据您的代码，最好通过添加与动画结尾相关的事件侦听器来结束函数，从元素样式中删除动画

在winner（）函数的末尾添加以下代码：


document.getElementsByClassName（“用户选择”）.item（索引-1）.addEventListener（“动画结束”，函数（e）{
e、 target.style=“”；
});这是因为您在第一个选择中内联添加动画一次，然后再也不会删除它，因此它再也不会被调用。在不重构所有内容的情况下，最简单的方法是在使用事件的动画之后删除内联样式，甚至使用比动画延迟更长的东西

添加动画后，只需在某处添加以下内容即可：

document.getElementsByClassName("user-choice").item(index - 1).addEventListener("animationend", function(evt){
    evt.target.style = "";
});

或者，不那么优雅：

setTimeout(function(){
    document.getElementsByClassName("user-choice").item(index - 1).style = "";
}.bind(index), 510 );


这应该是“修复问题”所需要的全部内容，但查看可读性也可能会有所帮助

来清理更多的东西-一般来说，如果你请求一个元素，NODLIST，（或者任何真正的）不是A，你应该考虑把它存储在一个变量中。不必在同一if/else块中多次解析同一事物的DOM，您可以将其存储为变量，并在最后调用一次函数（如）
如果需要进行更改，这有助于避免在多个位置更新引用

最后，通过将关键帧动画附加到类，并使用添加/删除该类，您可能会更适合


const type=[“纸”、“剪刀”、“石头”]，
结果=document.getElementById（'result'），
choice=document.getElementById（'choice'），
choices=document.getElementsByClassName（'user-choice'）；
函数winner（）{
//在游戏“运行”时防止更改
choice.disabled=true；
var userChoice=choice.value，
pcChoice=type[Math.floor（Math.random（）*type.length）]，
所选=选项[choice.selectedIndex-1]；
地位
if（pcChoice==userChoice）{
状态='平局'；
}否则{
如果（userChoice=='rock'和&pcChoice=='scissors'）{
状态=‘赢’；
}else if（userChoice=='paper'和&pcChoice=='rock'）{
状态=‘赢’；
}else if（userChoice==“剪刀”和&pcChoice==“纸”）{
状态=‘赢’；
}否则{
状态=‘丢失’；
}
}
selected.classList.add（'animated'）；
result.innerText=userChoice+'-'+pcChoice+'：You'+状态；
//动画完成后，将所有内容重置为其默认状态
已选定。addEventListener（'animationend'，函数（evt）{
choice.disabled=false；
choice.selectedIndex=0；
evt.target.classList.remove（'animated'）；
});
};
正文{
背景：径向梯度（金、黄花）；
字体系列：monospace；
文本对齐：居中；
字体大小：1.5rem；
}
@关键帧示例{
0%{变换：比例（1）；}
100%{变换：比例（1.3）；}
}
img{
填充：10px；
高度：100px；
宽度：自动；
}
img：悬停{
转换：比例（1.4）；
过渡：所有1；
}
动画{
动画：示例0.5s交替
.animate {
  animation: example 0.5s alternate;
}

document.getElementsByClassName("user-choice").item(index - 1).classList.add('animate');

var choicess = document.getElementsByClassName("user-choice");
[].forEach.call(choicess, function(el) {
  el.classList.remove('animate');
});

document.getElementsByClassName("user-choice").item(index - 1).style = "animation:example 0.5s alternate";

document.getElementsByClassName("user-choice").item(index - 1).classList.add('animate');
          
setTimeout(() => {
    document.getElementsByClassName("user-choice").item(index - 1).classList.remove('animate');
}, 1000)