Animate.css摇不工作

所以我在这里使用的Animate.css库的链接，如果你不知道什么亚姆谈论https://github.com/daneden/animate.css 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>

来源

2017-10-10 Demonwing103

因此，有两件事情是错在你的演示：

一，你的链接到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>

来源

2017-10-11 00:24:12 aug

这很难说，因为你使用的是第三方库，ISN不包括在你的小提琴中。你应该改变你的班级和身份证号码，以小写字母开头，这是更好的做法。这应该工作（使用小写类）：

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

来源

2017-10-10 23:35:51 Tom

Animate.css摇不工作

回答

相关问题