为什么 JavaScript 运行动画不会在一个简单的计数器中重复出现？

Question

如果这是一个微不足道的问题，我很抱歉，但我正在尝试使用 HTML 和 JS 设计一个简单的计数器。它有一个输入表单，每当用户键入一个数字并提交时，div 就会以 1 秒的间隔从 0 计数到该数字（使用 setInterval）。问题是我希望每次更新数字时，它都应该带有“弹跳”动画。我在这里附上文件。出于某种原因，我的代码只跳一次（当数字 1 出现时），之后就不会跳了。请建议我可以在这段代码中使用简单的 JavaScript 进行简单的调整。在此先感谢您的指导

function f() {
  
    var i = 0;
    var num = document.getElementsByTagName('input')[0].value
    num=parseFloat(num);

    var id=setInterval(function(){
        i++;
        document.getElementsByTagName('h2')[0].innerText=i;
        document.getElementsByTagName('h2')[0].style.animation="bounce 0.2s"
        if (i==num) { 
            alert("over!!")
            clearInterval(id);
            return;
        }},1000)
    

}



var button = document.getElementsByTagName('button');
button[0].addEventListener('click',f)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style type="text/css">
        input {
            border: 2px solid black;
        }
        div {
            height: 100px;
            width: 100px;
            margin: auto;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes bounce {
            from{

            }
            to {
                bottom: 10px;
            }
        }
    </style>

</head>
<body>
    
    <input type="text" name="counter">
    <br>
    <button type="submit">Submit</button>

    <div><h2 style="position:relative;">0</h2></div>


    <script type="text/javascript" src="script2.js"></script>
</body>
</html>

Answer 1

最简单的解决方案是监听动画结束并将其设置回 none:

document.getElementsByTagName('h2')[0].onanimationend = function(){
    this.style.animation = 'none'
}

为什么 JavaScript 运行动画不会在一个简单的计数器中重复出现？

Why doesn't JavaScript run animation repeatedly in a simple counter?

html

javascript

css

frontend

css-animations

为什么 JavaScript 运行 动画不会在一个简单的计数器中重复出现？

Why doesn't JavaScript run animation repeatedly in a simple counter?

html

javascript

css

frontend

css-animations

为什么 JavaScript 运行动画不会在一个简单的计数器中重复出现？