Animacja CSS nie działa poprawnie w wow js

Mam zintegrowany wow.js dla mojego projektu i napotkałem problem z animacją.Animacja CSS nie działa poprawnie w wow js

Klasa animacji, której użyłem do animowania elementu div, działa tylko wtedy, gdy wkleję klasę css z animate.css na moją stronę jako osadzonego arkusza stylów, a także element div, nawet jeśli zwrócę uwagę na dane - wow -delay = "5s" i animacja działa poprawnie po 5 sek. Plz pomóż mi, jeśli ktoś wie, dlaczego tak się dzieje.

Oto mój kod ..

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>

Źródło

2016-02-03 Raj

Klasa animacji działa tylko po wstawieniu klas jako osadzonych css w '' tags sugeruje, że nie łączysz się z plikiem poprawnie. Jeśli chodzi o animację działającą dopiero po pięciu sekundach (z opóźnieniem), może to być spowodowane wieloma problemami. – Defiant

Dziękuję za odpowiedź .. :) Po zlokalizowaniu pliku przy użyciu elementu inspect w przeglądarce i otworzeniu nowej karty wyświetlany jest plik animate.css. Jeśli link do tej lokalizacji nie jest poprawny, to nie wyświetli się w nowej karcie po prawej stronie ..? Więc myślę, że nie jest to problem z lokalizacją lub linkiem. I dla opóźnienia czasowego: - jeśli dajemy opóźnienie czasowe za pomocą wow-delay = "5s", to div powinien pojawić się po tym opóźnieniu 5 sekund i wykonać animację, która jest normalne prawo sprawy.? ale na stronie ładuje się div pokazuje. Im przy użyciu framework codeiginter i moje pliki css były w nagłówku, a skrypt w footer.php – Raj

'hidediv' nie jest ukrywany podczas ładowania strony, zgodnie z CSS. Możesz spróbować dodać do niego atrybut 'opacity: 0;'. – Defiant

Twój css musi zawierać klasę .animated z animate.css, jak to, co będzie dodane przez Wow.js (chyba że podasz inny selektor), gdy element jest widoczny, uruchamiając animacje.

Źródło

2016-10-10 08:46:42

Animacja CSS nie działa poprawnie w wow js

Odpowiedz

Powiązane problemy