单击时刷新CSS动画

Question

我正在尝试通过单击“旋转”的标记使框旋转360°。我已经使用了CSS3关键帧动画并将CSS应用于jQuery函数，但该符号仅触发动画一次;它在第二次点击时不会旋转。

HTML：

<div id="box"></div>

<a class="activate">spin</a>

jQuery的：

$(document).ready(function(){
$(".activate").click(function() {
    $('#box').css({
        "-webkit-animation-name":"cycle",
        "-webkit-animation-duration":"2s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        "animation-name":"cycle",
        "animation-duration":"2s",
        "animation-iteration-count":"1",
        "animation-fill-mode" : "forwards",

        "-moz-animation-name":"cycle",
        "-moz-animation-duration":"2s",
        "-moz-animation-iteration-count":"1",
        "-moz-animation-fill-mode" : "forwards",
    });
});
});

CSS：

#box {
    width:100px;
    height:100px;
    background-color:black;
    margin-bottom:10px;
}

@-webkit-keyframes cycle {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

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

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

.activate {
    margin-top:5px;
    padding:3px 5px;
    background-color:#333;
    color:#eee;
    cursor:pointer;
}

Here's my JSFiddle.

我看了遍StackOverflow并没有发现任何东西;我必须使用addClass并触发+重置动画吗？

非常感谢任何帮助！

Answer 1

第二次它没有动画，因为它已经定义了style。 在使用style分配CSS之前，请先清除它。

出于某种原因，如果style删除并立即再次添加它不起作用，那么必须放置setTimeout。如果您在重新分配alert之前放置style它将会有效。

$(document).ready(function(){
  $(".activate").click(function() {

      // Find target element
      var targetElement = document.getElementById('box')

      // Remove style attribute to clear previous animation
      targetElement.removeAttribute('style');

      // setTimeout is used to fix unknown reason that needs a halt.
      // An 'alert' also makes it working
      setTimeout(function(){

        // Use target element instead of finding element again by jQuery selector
        $( targetElement ).css({
            "-webkit-animation-name":"cycle",
            "-webkit-animation-duration":"2s",
            "-webkit-animation-iteration-count":"1",
            "-webkit-animation-fill-mode" : "forwards",

            "animation-name":"cycle",
            "animation-duration":"2s",
            "animation-iteration-count":"1",
            "animation-fill-mode" : "forwards",

            "-moz-animation-name":"cycle",
            "-moz-animation-duration":"2s",
            "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode" : "forwards",
        });

      }, 0);

  });
});

#box {
    width:100px;
    height:100px;
    background-color:black;
    margin-bottom:10px;
}

@-webkit-keyframes cycle {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

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

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

.activate {
    margin-top:5px;
    padding:3px 5px;
    background-color:#333;
    color:#eee;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

<a class="activate">spin</a>

Answer 2

这是你实现这一目标的最佳方式。

为动画制作活动课程

BaseActivity

并在动画结束后每次使用JQuery删除活动类

#box.active {
    -webkit-animation-name: cycle;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-name: cycle;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -moz-animation-name: cycle;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
}

jsfiddle