• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

animacja slider

–1 głos
115 wizyt
pytanie zadane 22 września 2018 w JavaScript, jQuery, AJAX przez fyrr Użytkownik (710 p.)

Witam, mam problem odnośnie dodania prostej animacji przejścia jednego zdjęcia w kolejne na sliderze. Chodzi o to, że za każdym razem po wciśnięciu na strzałkę w lewo lub w prawo chciałbym nadać jakieś lekkie opacity na kolejny element img żeby  zmiana nie była natychmiastowa tylko np. 0.5s. Napisałem sobie taki kodzik w jsie: 

function slideLeft() {

    slideAnim();

    index--;

    if (index < 0) {
        index = photos.length - 1;
        actualSlide.src = photos[index];

    } else {
        actualSlide.src = photos[index];
    }

}

function slideRight() {

    slideAnim();

    if (index == photos.length - 1) {
        index = -1;
    }

    index++;
    actualSlide.src = photos[index];
}

function slideAnim() {
    actualSlide.classList.toggle('active');
}

leftBar.addEventListener('click', slideLeft)
rightBar.addEventListener('click', slideRight)

W cssie mam: 

.slide {
    width: 100%;
    height: 100%;
}

.slide.active {
    animation: slide .5s linear;
}

@keyframes slide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


Odwołuję się do znacznika img o klasie .slide: 

<div class="sliderBox clearfix">
                <div class="barL"><i class="fas fa-angle-left"></i></div>
                <div class="slider"><img class="slide" src="img/projects/1.jpg" alt="furniture"></div>
                <div class="barR"><i class="fas fa-angle-right"></i></div>
            </div>

Problem polega na tym, że animację dodaje mi tylko na co drugie zdjęcie, rozumiem że to przez metodę toggle. Teraz pojawia się pytanie jak dodawać animację za każdym razem. 

1 odpowiedź

+2 głosów
odpowiedź 22 września 2018 przez arces Pasjonat (17,700 p.)
Można zrobić tak, że najpierw dodajesz klasę do danego elementu, która odpowiada za animację. A następnie po zakończeniu animacji tę klasę usuwa. Przy addEventListener jest event transitionend i wtedy właśnie napisać funkcję, która będzie usuwała daną klasę dotyczącą animacji.

Warto też po prostu przejrzeć najpopularniejsze skrypty slider'ów i zobaczyć jak tam to jest rozwiązane :)
komentarz 22 września 2018 przez fyrr Użytkownik (710 p.)
Dzięki za ukierunkowanie !

Podobne pytania

0 głosów
2 odpowiedzi 79 wizyt
0 głosów
1 odpowiedź 67 wizyt
pytanie zadane 19 marca w JavaScript, jQuery, AJAX przez niezalogowany
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,732 zapytań

112,375 odpowiedzi

237,246 komentarzy

46,693 pasjonatów

Przeglądających: 249
Pasjonatów: 7 Gości: 242

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...