Animate.css 摇动无效

Question

所以我正在使用 Animate.css 库这里是 link 如果你不知道我在说什么 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>

Answer 1

这很难说，因为您使用的是 fiddle 中未包含的第三方库。不过，您应该将 class 和 id 名称更改为以小写字母开头，这是更好的做法。这应该有效（使用小写 classes）：

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

Answer 2

所以你的演示中有两处错误：

一，你的link到animate.min.css好像是linkhere 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 i.e. this one。您可以通过将 link 直接复制并粘贴到 jsFiddle 的输入中来完成此操作。

其次，您仍然会看到动画不起作用。这是因为在幕后，shake uses transform CSS properties which 。您正在尝试将其应用于内联元素 <h1> 因此您只需将其设置为 display: block.

这里是forked working demo of your 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>

Animate.css 摇动无效

Animate.css shake not working

html

javascript

css

jquery

jsfiddle