[英]Animate.css shake not working
所以我正在使用Animate.css库,如果您不知道我在说什么https://github.com/daneden/animate.css,这里是链接
所以我要这样: <h1><a id="Header" class="Header">My First Heading</a></h1>
当我单击它时变成这样: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>
现在对我来说,它可以在chrome和firefox中使用,但是动画没有发生。 换句话说,我改变了它,但是颤抖没有发生。
HTML:
<body>
<h1><a id="Header" class="Header">My First Heading</a></h1>
<p>My first paragraph.</p>
</div>
</body>
CSS
#Header{
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-moz-animation-duration: 3s;
-moz-animation-delay: 2s;
-o-animation-duration: 3s;
-o-animation-delay: 2s;
animation-duration: 3s ;
animation-delay: 2s;
}
JQuery的
$(function(){
var animationName = 'animated shake';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('h1').on('click',function(){
$('#Header').addClass(animationName).one(animationEnd,function(){
$(this).removeClass(animationName);
});
});
});
我是jsfiddle的新手,因此可能无法正确设置。 这是我的jsfiddle演示https://jsfiddle.net/Demonwing103/7sc7zagq/21/
所以最终我不知道为什么即使更改为此也不会摇动: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>
很难说,因为您正在使用未包含在提琴中的第三方库。 不过,您应该更改类和ID名称,以小写字母开头,这是更好的做法。 这应该可以工作(使用小写的类):
$('.header').click(function(){
$(this).addClass('animated').addClass('shake');
});
因此,您的演示中有两件事是错误的:
一,你的链接到animate.min.css似乎链接在这里都到404。我相信你刚才输入animate.min.css
,但实际上你需要硬链接到一个实际的文件,即这一个 。 您可以通过将链接直接复制并粘贴到jsFiddle中的输入中来实现。
其次,您仍然会看到动画不起作用。 这是因为在后台, shake
使用了 仅适用于块级元素的 transform CSS属性 。 您试图将其应用于内联元素<h1>
因此您只需要将其设置为display: block
。
这是jsFiddle的分叉工作演示 。 仅供参考,如果不需要,我不想更改您现有的代码,但是由于设置了高延迟,因此您必须稍等片刻才能看到动画。
也是堆栈片段
$(function(){ var animationName = 'animated shake'; var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; $('h1').on('click',function(){ $('#Header').addClass(animationName).one(animationEnd,function(){ $(this).removeClass(animationName); }); }); });
body{ background-color: rgb(171, 194, 232); } #Header{ display: block; -webkit-animation-duration: 10s; -webkit-animation-delay: 2s; -moz-animation-duration: 3s; -moz-animation-delay: 2s; -o-animation-duration: 3s; -o-animation-delay: 2s; animation-duration: 3s ; animation-delay: 2s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/> <body> <h1><a id="Header" class="Header">My First Heading</a></h1> <p>My first paragraph.</p> <div id="animeContent"> </div> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.