animate.css Animationen standardmäßig auf Fadein

Ich habe eine Überschrift, die ich animieren möchte. Ich füge die Klassen "animated" und "bounceInUp" hinzu, um das zu erreichen, was ich möchte. Aus irgendeinem Grund führen die Elemente, die ich animiere, nicht die richtige Animation aus. Sie alle sind standardmäßig auf die "FadeIn" -Animation eingestellt. Ich verwende Express und Lenker, um eine Ansicht darzustellen, mit der ich dann jQuery benutze, um die Ansicht zu manipulieren. Hier ist meine Ansicht:animate.css Animationen standardmäßig auf Fadein

<div class='heading'> 
    <div class='container-fluid'> 

    <h1 class='cool-heading'> 
     <span>P</span> 
     <span>h</span> 
     <span>r</span> 
     <span>e</span> 
     <span>s</span> 
     <span>h</span> 
     <span>N</span> 
     <span>e</span> 
     <span>w</span> 
     <span>s</span> 
    </h1> 

    </div> 
</div> 

<div class='articles'> 
    <div class='articles-inner container'> 
    <!-- articles will go here --> 
    </div> 
</div> 

{{#each scripts}} 
    <script type="text/javascript" src="{{script}}"></script> 
{{/each}}

und hier ist mein js:

$(document).ready(function(){ 
    var count = 1; 
    $('.cool-heading').children('span').each(function(){ 
    var delay = (count/($('.cool-heading').children('span').length)) + 's'; 
    $(this).css({'-webkit-animation-delay': delay,'animation-delay': delay}); 
    $(this).attr('class','animated bounceInUp'); 
    count++; 
    }); 
});

Ich habe auch ein main.handlebars Layout, wenn jemand einen Fehler, dass vor Ort können:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Mongo Scraper</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 


    {{{body}}} 




    </body> 
</html>

Quelle

2017-10-26 cerrach

Turns Out, das sich überspannt (Inline-Elemente), kann nicht richtig animiert werden. Ich habe "Anzeige: Inline-Block" zu CSS hinzugefügt, um die gewünschte Funktionalität zu erhalten.

Quelle

2017-10-26 04:44:01 cerrach

animate.css Animationen standardmäßig auf Fadein

Antwort

Verwandte Themen