CSS Animation funktioniert nicht richtig in wow js

Ich habe die wow.js für mein Projekt integriert und ich habe ein Problem mit der Animation aufgetreten.CSS Animation funktioniert nicht richtig in wow js

Die Animationsklasse, die ich verwendet habe, um das div zu animieren funktioniert nur, wenn ich die CSS-Klasse von animate.css in meine Seite als eingebettetes Stylesheet einfügen und auch das div zeigt, auch wenn ich eine Verzögerung in Daten-wow gebe -delay = "5s" und die Animation funktioniert nach 5 Sekunden korrekt. Plz mir helfen, wenn jemand weiß, warum das passiert.

Hier ist mein Code ..

HTML:

<div class="cssAnimation hidediv"> 
    <div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s"> 
     Anmation goes here 1 
    </div> 
</div>

CSS:

<style type="text/css"> 

.dial1{ 
    width:200px; 
    height: 100px; 
    display: block; 
    position: absolute; 
    background: #000; 
    color:#fff; 
    padding: 10px; 
    right: 0; 
    z-index: 9999; 
} 

.dial2{ 
    width:200px; 
    height: 100px; 
    display: block; 
    position: absolute; 
    background: #000; 
    color:#fff; 
    padding: 10px; 
    right: 210px; 
} 


.hidediv{ 
-webkit-animation: hide 2s forwards; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-delay: 5s; 
animation: hide 2s forwards; 
animation-iteration-count: 1; 
animation-delay: 5s; 
} 

@-webkit-keyframes hide { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    visibility:hidden; 
    display: none; 
    } 
} 

@keyframes hide { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
     visibility:hidden; 
    display: none; 
} 
} 

    .cssAnimation{ 
     width:600px; 
     height: 300px; 
    position: absolute; 
    /* display: none; */ 
    z-index: 9999; 
    } 

@-webkit-keyframes slideInLeft { 
     0% { 
      opacity: 0; 
      -webkit-transform: translateX(-2000px); 
      transform: translateX(-2000px); 
      } 

     100% { 
     -webkit-transform: translateX(0); 
      transform: translateX(0); 
     } 
     } 

    @keyframes slideInLeft { 
     0% { 
     opacity: 0; 
     -webkit-transform: translateX(-2000px); 
     -ms-transform: translateX(-2000px); 
     transform: translateX(-2000px); 
     } 

     100% { 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
     transform: translateX(0); 
    } 
    } 

    .slideInLeft { 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
    } 

    </style>

Quelle

2016-02-03 Raj

Die Animationsklasse funktioniert nur, nachdem Sie die Klassen als eingebettete css in '' Tags eingefügt haben, schlägt vor, dass Sie nicht korrekt mit der Datei verknüpfen. Da die Animation erst nach fünf Sekunden (mit der Verzögerung) funktioniert, kann dies durch viele Probleme verursacht werden. – Defiant

Danke für Ihre Antwort .. :) Wenn ich die Datei mit inspect-Element im Browser suchen und öffnen Sie die neue Registerkarte die animate.css-Datei angezeigt wird. Wenn die Verknüpfung zu diesem Ort nicht korrekt ist, wird sie nicht in der neuen Registerkarte rechts angezeigt. Also ich denke, es ist nicht mit dem Problem mit Standort oder Link.Und für die Zeitverzögerung: - Wenn wir eine Verzögerung mit Daten geben-wow-delay = "5s" sollte das div nach dieser Verzögerungszeit 5sec erscheinen und die Animation ausführen, die ist der Normalfall richtig. aber auf der Seite laden selbst das div zeigt.Im mit codeIGinter Framework und meine CSS-Dateien waren in Header und Skript in footer.php – Raj

'hidediv' ist nicht ausgeblendet, wenn die Seite lädt, nach dem CSS. Sie könnten versuchen, das Attribut "opacity: 0;" hinzuzufügen. – Defiant

CSS die .animated Klasse von animate.css umfassen muss, wie das ist, was sein wird, Wird von Wow.js hinzugefügt (sofern Sie keinen anderen Selektor angeben), wenn das Element angezeigt wird und Ihre Animationen ausgelöst werden.

Quelle

2016-10-10 08:46:42

CSS Animation funktioniert nicht richtig in wow js

Antwort

Verwandte Themen