我正在尝试通过单击“旋转”标志使框旋转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并以这种方式触发+重置动画吗?

任何帮助将不胜感激!

最佳答案

这是您可以实现这一目标的最佳方法。

制作动画活动课

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


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

$(document).ready(function() {
    $(".activate").click(function() {
        $('#box').addClass('active');
        $('#box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
        $(this).removeClass('active');
        });

    });
});


jsfiddle

关于jquery - 单击可刷新CSS动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45047218/

10-14 21:07
查看更多