今天我尝试在我的网站animate.css
中实施但我想确保'效果在:悬停中激活 所以我使用了jquery这个
代码是:
$(".questo").hover( function (e) {
$(this).toggleClass('animated shake', e.type === 'mouseenter');
});
问题是,一旦移除鼠标,'效果就会中断。 一旦它开始,它甚至可以在没有悬停效应的情况下降低效果?
提前谢谢大家
答案 0 :(得分:31)
在CSS文件中,您只需添加:
.questo:hover {
-webkit-animation: shake 1s;
animation: shake 1s;
}
这个解决方案的好处是它不需要JavaScript。有关参考,请查看此page
答案 1 :(得分:7)
请参阅此变体(更具互动性):
$(".myDiv").hover(function(){
$(this).addClass('animated ' + $(this).data('action'));
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
$(this).removeClass('animated ' + $(this).data('action'));
});
答案 2 :(得分:4)
不是在悬停时切换类,而是在鼠标输入中添加它们,就像这样
$(".questo").mouseEnter(function(event) {
$(this).addClass("animated shake");
});
然后您可以在动画结束时删除类
$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) {
$(this).removeClass("animated shake");
});
我会在鼠标输入时进行,而不是悬停,因为当鼠标移出元素时你可以触发动画。
请参阅此jsFiddle以获取示例
答案 3 :(得分:1)
不是使用toggleClass
,而是通过在悬停中添加类来更改代码,并为动画结束css3挂钩以完成并删除类。
代码:
$(".questo").hover(function (e) {
$(this).addClass('animated shake');
});
$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
$(this).removeClass('animated shake');
});
答案 4 :(得分:0)
我相信你说动画一旦鼠标离开就会停止,你试图实现一旦开始悬停就会继续保持动画。
在这种情况下,您必须将动画迭代计数设置为无限。 请添加
animation-iteration-count:infinite
到样式表中的动画类。
答案 5 :(得分:0)
假设您想要在鼠标离开时添加该类,并在鼠标离开时删除该类....
你可以试试这个:
$(".questo").hover( function (e) {
$(this).addClass('animated shake');
}, function(e){
$(this).removeClass('animated shake');
});
答案 6 :(得分:0)
export class CharacterWithCommasPipe implements PipeTransform {
transform(array) {
return array.map(item => item.name).join(', ');
}
}