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

Question

Here I simply trying to animate on every click, but its not happening more than once.在这里，我只是尝试在每次点击时制作动画，但它不会不止一次发生。 In the first click it works but after that it doesn't.在第一次单击时它可以工作，但之后就不行了。 Here is my code:这是我的代码：

<!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>

Is there something to do with the transform property or am I calling the eventListener wrong?与转换属性有关还是我调用 eventListener 错误？

Answer 1

animation run once because elements stay on position 10px animation 运行一次，因为元素停留在 position 10px

this will return element back, and new click will call new animation这将返回元素，新的点击将调用新的 animation

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)
    }

Or you should change translate x, like this或者你应该改变翻译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
    }

If you want to push elements further如果你想进一步推动元素

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-04-25 16:54:04

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-04-25 16:54:04

解决方案1
0 已采纳 2021-04-25 16:54:04