单击一次后事件处理程序不起作用答案

【问题标题】：Event handler not working after once on click单击一次后事件处理程序不起作用
【发布时间】：2021-04-26 00:58:56
【问题描述】：

在这里，我只是尝试为每次点击制作动画，但它不会多次发生。在第一次单击时它可以工作，但之后就不行了。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hudai</title>
    <style type="text/css" media="screen">
        #one {
            border: 1px solid red;
        }
        #two {
            border: 1px solid blue;
        }   
        #three {
            border: 1px solid green;
        }       
    </style>
</head>
<body>
    <button id="ok" type="submit"></button>
    <div>
        <div id="one">
            <p>One is here</p>
        </div>
        <div id="two">
            <p>Two is here</p>
        </div>  
        <div id="three">
            <p>Three is here</p>
        </div>      
    </div>
    <script>
        var button = document.getElementById('ok');
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');

        button.addEventListener('click', animate);
        function animate() {
            one.style.transition = 'transform 0.1s ease-in-out';
            two.style.transition = 'transform 0.1s ease-in-out';
            three.style.transition = 'transform 0.1s ease-in-out';
            one.style.transform = 'translateX(10px)';
            two.style.transform = 'translateX(10px)';
            three.style.transform = 'translateX(10px)';
        }
    </script>
</body>
</html>

与转换属性有什么关系还是我调用 eventListener 错误？

【问题讨论】：

标签： javascript event-handling dom-events css-transitions css-transforms

【解决方案1】：

动画运行一次，因为元素停留在 10px 位置

这将返回元素，新的点击将调用新的动画

function animate() {
        one.style.transition = 'transform 0.1s ease-in-out';
        two.style.transition = 'transform 0.1s ease-in-out';
        three.style.transition = 'transform 0.1s ease-in-out';


        one.style.transform = 'translateX(10px)';
        two.style.transform = 'translateX(10px)';
        three.style.transform = 'translateX(10px)';

        setTimeout(function() {
            one.style.transform = 'translateX(0px)';
            two.style.transform = 'translateX(0px)';
            three.style.transform = 'translateX(0px)';
        }, 500)
    }

或者你应该改变翻译x，像这样

    var button = document.getElementById('ok');
    var one = document.getElementById('one');
    var two = document.getElementById('two');
    var three = document.getElementById('three');

    var pos = 10;

    button.addEventListener('click', animate);
    function animate() {
        one.style.transition = 'transform 0.1s ease-in-out';
        two.style.transition = 'transform 0.1s ease-in-out';
        three.style.transition = 'transform 0.1s ease-in-out';


        one.style.transform = 'translateX(' + pos + 'px)';
        two.style.transform = 'translateX(' + pos + 'px)';
        three.style.transform = 'translateX(' + pos + 'px)';

        pos += 10
    }

如果你想进一步推动元素

【讨论】：

但我不希望元素重新定位自己，我希望它们从当前位置移动。就像每次点击滑动元素 10 像素一样。
@SamiurRahamanKhan 添加了没有重新定位的解决方案，以回答