单击一次后事件处理程序不工作

Question

在这里，我只是尝试为每次点击设置动画，但它不会发生超过一次。在第一次点击时它起作用，但之后它不起作用。这是我的代码：

<!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 错误？

Answer 1

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

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

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
    }

如果你想进一步推动元素

单击一次后事件处理程序不工作

Event handler not working after once on click

javascript

event-handling

dom-events

css-transitions

css-transforms