Question

我有一个html表，其中报告了尺寸（长度/宽度/高度/体积）与公制（英寸/英尺/厘米/米）。每个td元素都包含一个输入元素。更改值时，表中的其他值将根据新值重新计算。这是一个小提琴：

更改值时，表中的所有单元格均不受影响。因此，我想引起人们的注意，因为它们会稍微闪烁一下。

这个简单得多的例子对我来说很重要：

问题是，尽管input事件监听器完全可以执行我想要的重新计算表值的功能，但是它与我编写的函数不能很好地配合：{{1 }}。也许我的功能发臭！

我写了glowText(element)，认为以下逻辑可以成立：我输入一个由glowText(element)事件侦听器捕获的值。 glowText的element参数添加了一个类input。当打开控制台时，我可以看到有问题的元素可以具有许多发光类，因此glow中的空间。现在，每次我添加类element.className += ' glow';时，css动画都应该开始。但是我希望它会覆盖现有的动画，但似乎并没有这样做。无论如何，一旦完成CSS动画，就会从元素中删除glow类。

我想要的结果如下：

无论何时触发glow事件监听器，input css动画都会从头开始，覆盖当前运行的glow css动画。

简要编辑：我想知道是否有可能的解决方案是触发下一个动画之前终止当前正在运行的CSS动画？可以这样做吗？

这是CSS的关键部分：

glow

Javascript：

@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;
}

Answer 1

我想我有一件适合您的东西。我不确定计算是否在最佳位置，但是它可以工作。注意：我在输出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>

简要突出显示输入中的文本

1 个答案: