为了开怀大笑,我在一个网站上放了Google-esk滚动条。
第一次单击所选元素后,一切正常,但此后不会再次触发。

我已经尝试过.click.on('click', function() {}),但都没有用。
关于如何解决以及为什么这样的想法?

Basic jsFiddle here

源代码示例;

<html>
    <head>
        <title>
            Roll Me
        </title>

        <style type="text/css">

        </style>

        <script>
        $(function() {
            $('#roll').on('click', function() {
                $('body').css({
                    "-moz-animation-name": "roll",
                    "-moz-animation-duration": "4s",
                    "-moz-animation-iteration-count": "1",
                    "-webkit-animation-name": "roll",
                    "-webkit-animation-duration": "4s",
                    "-webkit-animation-iteration-count": "1"
                });
            });
        });
        </script>
    </head>
    <body>
        <div id="roll">
            <h1>click me</h1>
        </div>
    </body>
</html>

最佳答案

完成动画后,您需要删除应用的动画,然后在随后的单击中将其重新添加。

var $body = $('body');

$('#roll').on('click', function() {
    $body.addClass('barrel-roll');
});

$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) {
    $body.removeClass('barrel-roll');
});
@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}

@keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}

.barrel-roll {
 -webkit-animation-name: roll;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count:1;
 -moz-animation-name: roll;
 -moz-animation-duration: 4s;
 -moz-animation-iteration-count:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roll">
    <h1>click me</h1>
</div>

关于javascript - CSS动画后,点击事件丢失,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29415329/

10-10 18:43
查看更多