Animate.css schütteln funktioniert nicht

So bin ich hier, um die Animate.css-Bibliothek ist die Verbindung, wenn Sie nicht wissen, was iam reden über https://github.com/daneden/animate.css Animate.css schütteln funktioniert nicht

so möchte ich dies: <h1><a id="Header" class="Header">My First Heading</a></h1> dies werden, wenn ich es klicken: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Jetzt funktioniert es in Chrome und Firefox für mich, aber die Animation passiert nicht. Mit anderen Worten, ich habe es geändert, aber das Schütteln geschieht nicht.

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

});

Ich bin neu in jsfiddle, damit die Dinge nicht richtig eingerichtet werden. hier ist meine jsfiddle Demo https://jsfiddle.net/Demonwing103/7sc7zagq/21/

so schließlich weiß ich nicht, warum es nicht rütteln, obwohl sein Wechsel dazu: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Quelle

2017-10-10 Demonwing103

So gibt es zwei Dinge, die in Ihrer Demo falsch sind:

One, Ihr Link zu animate.min.css scheint here zu verbinden, das geht zu a 404. Ich glaube, Sie haben gerade animate.min.css eingegeben, aber Sie müssen es tatsächlich hart zu einer tatsächlichen Datei verknüpfen, dh diese one. Sie können dies tun, indem Sie den Link direkt in jsFiddle kopieren und einfügen.

Zweitens, Sie sehen immer noch, dass die Animation nicht funktioniert. Dies ist, weil hinter den Kulissen, shake uses transform CSS properties die are only applicable to block level elements. Sie versuchen, es auf ein Inline-Element <h1> anzuwenden, also müssen Sie es einfach auf display: block setzen.

Hier ist ein . Nur zur Erinnerung: Ich wollte den bestehenden Code nicht ändern, wenn ich das nicht brauche, aber Sie müssen etwas warten, bevor Sie die Animation sehen, da Sie eine hohe Verzögerung eingestellt haben.

Auch stapeln Snippet

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

Quelle

2017-10-11 00:24:12 aug

Es ist schwer zu sagen, wie Sie eine Drittanbieter-Bibliothek verwenden, die isn Ist nicht in deiner Geige enthalten. Sie sollten Ihre Klassen- und ID-Namen ändern, um mit Kleinbuchstaben zu beginnen, aber es ist eine bessere Übung. Dies sollte (Kleinbuchstabe Klassen) arbeitet:

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

Quelle

2017-10-10 23:35:51 Tom

Animate.css schütteln funktioniert nicht

Antwort

Verwandte Themen