Animate.css-Übergang nur, wenn Website lädt

Question

Für die Übergänge auf einer meiner Websites verwende ich Animated.css. Es funktioniert gut, außer wenn ich einen Übergang auf der Navbar anwenden, jedes Mal, wenn ich eine Seite (klicken Sie auf ein Element in der Navigationsleiste) ändern, wird der Übergang erneut ausgeführt.

Ich möchte den Übergang nur ausführen, wenn die Website lädt/neu lädt. Nicht wenn ich eine Seite ändere.

Gibt es eine Möglichkeit, dies mit Plain CSS zu erreichen? Oder muss ich etwas JavaScript-Code implementieren?

Snippet des Codes:

<div class="col-xs-6 col-xs-offset-3 col-sm-2 col-sm-offset-1"> 
    <header id="masthead" class="site-header" role="banner"> 
     <div class="top-header animated fadeInDown"> 
      <nav class="navbar navbar-primary" role="navigation" id="navigation"> 
      //... 
      </nav> 
     </div> 
    </header> 
</div> 

Answer 1

Sie können eine sitzungs nur Cookie in Javascript verwenden.

Fügen Sie das folgende Skript an der Unterseite der Seite:

<script> 
if (document.cookie.indexOf('siteloaded=loaded') < 0) { 

    [... Activate Animation ...] 

    document.cookie = "siteloaded=loaded"; 
} 
</script> 

Wenn die Seite zum ersten Mal geladen, prüft es, ob die Sitzung nur für Cookie vorhanden ist, um zu sehen.

Wenn der Cookie nicht existiert, wird die Animation aktiviert und der Cookie gesetzt.

Wenn der Cookie existiert, wird die Animation nicht aktiviert.

Wenn der Besucher den Site-Tab schließt, wird der Session-Only-Cookie gelöscht.

---

Weiterführende Literatur:

Dank Mohit Bhardwaj für seine Spitze, unten.

Wenn Sie eine reine HTML5-Client-seitige Speicherlösung ausprobieren möchten, die aktueller und leistungsstärker ist (schnellere Leistung, weniger Server-Roundtrips, höhere Kapazität usw.) als die Verwendung eines Sitzungscookies, Sie könnte auch die window.sessionStorage Eigenschaft check out:

https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage