我有一个html表，其中报告尺寸（长度/宽度/高度/体积）与公制（英寸/英尺/厘米/米）。每个td元素都包含一个输入元素。更改值时，表中的其他值将根据新值重新计算。这是一个小提琴：
http://jsfiddle.net/r9h8xfuy/1/
更改值时，表中的所有单元都不受影响。因此，我想引起人们的注意，因为它们会稍微闪烁一下。
这个简单得多的示例对我来说至关重要：
http://jsfiddle.net/cft7n6ej/6/
问题在于，尽管input事件侦听器完全按照我想要的方式重新计算了表值，但它与我编写的函数glowText(element)不能很好地配合。或者我的功能发臭！
我写了glowText(element)认为以下逻辑可以成立：
我输入由input事件侦听器捕获的值。 glowText的element参数添加了一个类glow。当打开控制台时，可以看到有问题的元素可以具有许多发光类，因此element.className += ' glow';中的空间。现在，每次我添加类glow时，css动画都应该开始。但是我希望它会覆盖现有的动画，但似乎并没有这样做。无论如何，一旦完成CSS动画，就会从元素中删除glow类。
我想要的结果如下：
每当触发input事件侦听器时，glow css动画就会从头开始，覆盖所有当前运行的glow css动画。
简要编辑：我想知道是否可能的解决方案可能是在触发下一个动画之前终止当前正在运行的CSS动画？有可能这样做吗？
这是CSS的关键部分：
@keyframes glow {
0% {
color: rgb(255,40,180);
font-weight: 900;
text-shadow: 0px 0px 20px rgb(255,140,180);
}
50% {
color: rgb(255,40,180);
font-weight: normal;
text-shadow: none;
}
100% {
color: black;
}
}
.glow {
animation: glow 1s ease-out 0s 1;
-webkit-animation: glow 1s ease-out 0s 1;
}
Javascript：
function glowText(element) {
element.className += ' glow';
element.addEventListener('animationend', function() {
this.classList.remove('glow');
});
}
var myInput = document.getElementById('myInput');
var myOutput = document.getElementById('myOutput')
myInput.addEventListener('input', function() {
myOutput.textContent = myInput.value*2;
glowText(myOutput);
})
最佳答案
我想我有东西要给你。我不确定计算是否在最佳位置，但是它可以工作。注意：我在输出glow中添加了类p。
var myInput = document.getElementById('myInput');
var myOutput = document.getElementById('myOutput');
myInput.addEventListener('input', function(e) {
myOutput.textContent = myInput.value * 2;
myOutput.classList.remove("glow");
void myOutput.offsetWidth;
myOutput.classList.add("glow");
}, false);@keyframes glow {
0% {
color: rgb(255, 40, 180);
font-weight: 900;
text-shadow: 0px 0px 20px rgb(255, 140, 180), 0px 0px 2px rgb(255, 40, 180);
}
50% {
color: rgb(255, 40, 180);
font-weight: normal;
text-shadow: none;
}
100% {
color: black;
}
}
.glow {
animation: glow 1s ease-out 0s 1;
-webkit-animation: glow 1s ease-out 0s 1;
}<body>
<input type='text' id='myInput' value='5' />
<p id='myOutput' class='glow'>
25
</p>
</body>