我正在尝试通过单击“旋转”标志使框旋转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/