为了开玩笑，我在我的一个网站上放了一个 Google-esk barrel roll。
第一次单击所选元素时一切正常，但之后不会再次触发。
我试过 .click、.on('click', function() {}) 都没有用。
关于如何解决以及为什么会发生这种情况的任何想法？
源代码示例；
<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/