Animate.css摇晃不起作用

Question

So I am using the Animate.css library here is the link if you dont know what iam talking about https://github.com/daneden/animate.css 所以我正在使用Animate.css库，如果您不知道我在说什么https://github.com/daneden/animate.css，这里是链接

so I want this: <h1><a id="Header" class="Header">My First Heading</a></h1> to become this when I click it: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1> 所以我要这样： <h1><a id="Header" class="Header">My First Heading</a></h1>当我单击它时变成这样： <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Now it is working in chrome and firefox for me but the animation is not happening. 现在对我来说，它可以在chrome和firefox中使用，但是动画没有发生。 in other words I got it to change but the shaking is not happening. 换句话说，我改变了它，但是颤抖没有发生。

HTML: HTML：

<body>
<h1><a id="Header" class="Header">My First Heading</a></h1> 
<p>My first paragraph.</p>
</div>
</body>

CSS 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 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);
     });
 });

}); }）;

I am new to jsfiddle so things might not be set up right. 我是jsfiddle的新手，因此可能无法正确设置。 here is my jsfiddle demo https://jsfiddle.net/Demonwing103/7sc7zagq/21/ 这是我的jsfiddle演示https://jsfiddle.net/Demonwing103/7sc7zagq/21/

so ultimately I don't know why its not shaking even though its changing to this: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1> 所以最终我不知道为什么即使更改为此也不会摇动： <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Answer 1

It's tough to say, as you're using a third party library that isn't included in your fiddle. 很难说，因为您正在使用未包含在提琴中的第三方库。 You should change your class and id names to begin with lower case letters though, it's better practice. 不过，您应该更改类和ID名称，以小写字母开头，这是更好的做法。 This should work (lower case classes used): 这应该可以工作（使用小写的类）：

$('.header').click(function(){
     $(this).addClass('animated').addClass('shake');
 });

Answer 2

So there are two things that are wrong in your demo: 因此，您的演示中有两件事是错误的：

One, your link to animate.min.css seems to link here which goes to a 404. I believe you just typed in animate.min.css but you need to actually hard link it to an actual file ie this one . 一，你的链接到animate.min.css似乎链接在这里都到404。我相信你刚才输入animate.min.css ，但实际上你需要硬链接到一个实际的文件，即这一个。 You can do this by copying and pasting the link straight into the input in jsFiddle. 您可以通过将链接直接复制并粘贴到jsFiddle中的输入中来实现。

Second, you'll still see the animation doesn't work. 其次，您仍然会看到动画不起作用。 This is because behind the scenes, shake uses transform CSS properties which are only applicable to block level elements . 这是因为在后台， shake使用了仅适用于块级元素的 transform CSS属性。 You are trying to apply it to an inline element, <h1> so you simply need to set it to be display: block . 您试图将其应用于内联元素<h1>因此您只需要将其设置为display: block 。

Here is a forked working demo of your jsFiddle . 这是jsFiddle的分叉工作演示。 Just FYI I didn't want to change your existing code if I didn't need to but you'll have to wait a bit before you see the animation since you have a high delay set. 仅供参考，如果不需要，我不想更改您现有的代码，但是由于设置了高延迟，因此您必须稍等片刻才能看到动画。

Also stack snippet 也是堆栈片段

 $(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>

Animate.css摇晃不起作用

问题描述

2 个解决方案

解决方案1
0 2017-10-10 23:35:51

解决方案2
0 已采纳 2017-10-11 00:24:12

Animate.css摇晃不起作用

问题描述

2 个解决方案

解决方案1 0 2017-10-10 23:35:51

解决方案2 0 已采纳 2017-10-11 00:24:12

解决方案1
0 2017-10-10 23:35:51

解决方案2
0 已采纳 2017-10-11 00:24:12