Animate.css摇不工作
所以我在这里使用的Animate.css库的链接,如果你不知道什么亚姆谈论https://github.com/daneden/animate.cssAnimate.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>
因此,有两件事情是错在你的演示:
一,你的链接到animate.min.css似乎链接here都到一个404.我相信你只是输入animate.min.css
,但你需要实际上硬链接到一个实际的文件,即这个one。您可以通过将链接直接复制并粘贴到jsFiddle中的输入中来完成此操作。
其次,您仍然会看到动画不起作用。这是因为在幕后,shake
uses transform CSS properties其中are only applicable to block level elements。您正尝试将其应用于内联元素<h1>
,因此您只需将其设置为display: block
即可。
这是forked working demo of your jsFiddle。仅供参考如果我不需要,我不想更改现有的代码,但在看到动画之前,您必须稍等一会,因为您的延迟时间很长。
另外堆叠片断
$(function(){
\t var animationName = 'animated shake';
\t var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
\t
\t $('h1').on('click',function(){
\t \t $('#Header').addClass(animationName).one(animationEnd,function(){
\t \t \t $(this).removeClass(animationName);
\t \t });
\t });
});
body{
\t background-color: rgb(171, 194, 232);
}
#Header{
display: block;
\t -webkit-animation-duration: 10s;
\t \t -webkit-animation-delay: 2s;
-moz-animation-duration: 3s;
\t -moz-animation-delay: 2s;
-o-animation-duration: 3s;
\t -o-animation-delay: 2s;
animation-duration: 3s ;
\t \t 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>
这很难说,因为你使用的是第三方库,ISN不包括在你的小提琴中。你应该改变你的班级和身份证号码,以小写字母开头,这是更好的做法。这应该工作(使用小写类):
$('.header').click(function(){
$(this).addClass('animated').addClass('shake');
});