我在css中创建了一个旋转动画,它需要1s并且使用类.comet设置'转发'。如何在每次点击外部元素时启动动画?
#carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; }
@-moz-keyframes rotation{
from{transform:rotate(0deg);}
to{transform:rotate(-360deg);}
@-webkit-keyframes rotation{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(-360deg);}
}
答案 0 :(得分:7)
$(function() {// Shorthand for $( document ).ready()
$( ".trigger" ).click(function(e) {
e.preventDefault();
$(this).addClass( "animation" ).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){
$(this).removeClass( "animation" );
});
});
});
资源:
答案 1 :(得分:3)
我不确定我是否理解你。无论如何:
$('#button').click(function() {
var el = $('#cometa').addClass('rotation');
setTimeout(function() {
el.removeClass('rotation');
}, 1000);
});
答案 2 :(得分:0)
每次单击a元素时,都会将css类添加到元素中。 检查此代码。
如果.comet
是你的css动画类,那么
$(document).ready(function(){
$('#everybutton_element_id').click(function (e) {
$(this).addClass('comet');
$(this).delay(2000).removeClass('comet');
});
});
为要实现它的任何元素重复相同的代码。
答案 3 :(得分:0)
$('body').on('click', '#next', function() {
$("#cometa").addClass("rotation");
setTimeout(function () {
$("#cometa").removeClass('rotation');
}, 1500);
});
这适用于我的问题。我在动画时间结束后删除该类。