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搖不工作

回答

相關問題