Question

为了笑，我在我的一个网站上放了一个Google-esk桶所有元素在第一次单击时都可以正常工作，但在此之后不会再次触发。

我尝试了.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>

Answer 1

您需要删除完成后应用的动画，然后在后续点击中重新添加动画。

＆＃13;

var $body = $('body');

$('#roll').on('click', function() {
    $body.addClass('barrel-roll');
});

$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) {
    $body.removeClass('barrel-roll'); 
});

＆＃13;

@-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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roll">
    <h1>click me</h1>
</div>

＆＃13;

Answer 2

那是因为到那时body元素已经应用了CSS样式。解决此问题的方法是从style元素中删除body属性：

setTimeout(function() {
    $('body').removeAttr('style');
}, 4000);

我在这里使用了setTimeout来确保style属性仅在动画完成后（4秒后）重置。

JSFiddle demo

Answer 3

点击处理程序没有触发。您可以使用console.log进行验证。您需要重置动画。

Answer 4

动画完成后，您已经设置了动画！解决此问题的唯一方法是再次删除它，然后重新触发它。然而，最好的方法是使用CSS类：

＆＃13;

var busy = false;

$('#roll').on('click', function() {
  if(busy) return;
  else busy = true;
  $('body').addClass("do-the-barrel-roll");
  setTimeout(function(){
    $('body').removeClass("do-the-barrel-roll");
    busy = false;
  }, 2100);
});

＆＃13;

@-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) }
}

body.do-the-barrel-roll {
  -webkit-animation: roll 2s;
  -moz-animation: roll 2s;
  animation: roll 2s;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="roll">
    <h1>click me</h1>
</div>

＆＃13;

简单地添加类并在动画完成所需的时间后删除它。此外，我添加了一个忙，以防止多次点击使这个地狱。

Answer 5

正在发生的是css已应用。由于它已经应用，然后在下次点击时再次应用它时没有任何反应。我创建了一些有用的东西，添加一个类，然后在超出动画长度的超时后删除。 https://jsfiddle.net/5yqrxvkd/3/

$('#roll').on('click', roll);

function roll(){
    $('body').addClass("animate");
    setTimeout(function(){
        $("body").removeClass("animate");
    }, 4000);
}

使用动画或其他东西可能有更好的方式，但我并不熟悉它。

点击css动画后丢失的事件

5 个答案: